Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extension to toggle HTML source editor #81

Closed
tbhaxor opened this issue May 19, 2020 · 9 comments
Closed

Extension to toggle HTML source editor #81

tbhaxor opened this issue May 19, 2020 · 9 comments

Comments

@tbhaxor
Copy link
Contributor

tbhaxor commented May 19, 2020

Is there any extension (if not, could you make it) that shows rendered html in the editor itself like in other wysiwygs.

Without HTML Code
image

With HTML Code
image

Test URL: https://froala.com/wysiwyg-editor/

And yes the idea of grouping extension #78 came from this wysiwyg only

@tbhaxor
Copy link
Contributor Author

tbhaxor commented May 21, 2020

@Leecason when can i expect this ?

@Leecason
Copy link
Owner

it's in my dev plan

@tbhaxor
Copy link
Contributor Author

tbhaxor commented May 23, 2020

I am using it in production, Could you develop this in some higher priority please?

@Leecason
Copy link
Owner

when HTML source view is active, if user change the source code, editor will react to the change?

@tbhaxor
Copy link
Contributor Author

tbhaxor commented May 27, 2020

it should. but the following must change

  • css / styles (inline only, ignore classes or external style sheets)
  • images
  • alignment
  • font styles

@tbhaxor
Copy link
Contributor Author

tbhaxor commented Jun 5, 2020

Hey @Leecason may i know the status. As i already told you i am using it in the production environment.

@Leecason
Copy link
Owner

Leecason commented Jun 6, 2020

This feature is WIP, Thanks for your support. It was a good try for me.

@Leecason
Copy link
Owner

Usage see: #106

Leecason pushed a commit that referenced this issue Jun 10, 2020
# [1.24.0](https://github.com/Leecason/element-tiptap/compare/@1.23.0...@1.24.0) (2020-06-10)

### Bug Fixes

* 🐛 bubble menu cut off by editor perimeter (#98) ([94d4415](94d4415))

### Features

* ✨ add `CodeView` extension (#81) ([e2de3b2](e2de3b2))
@Leecason
Copy link
Owner

🎉 This issue has been resolved in version 1.24.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Leecason pushed a commit that referenced this issue Jun 27, 2020
# 1.0.0 (2020-06-27)

### Bug Fixes

*  🔧 package.json config ([bcfe269](bcfe269))
* 🌐 editor characters i18n ([18a3935](18a3935))
* 🎨 lint ([1f8768e](1f8768e))
* 🎨 selectedCell background-color ([6f98473](6f98473))
* 🐛 `Link` not work in Firefox (#119) ([f286d5c](f286d5c))
* 🐛 alias entries, remove utils alias ([65416b8](65416b8))
* 🐛 align left cant work bug ([859224b](859224b))
* 🐛 ALIGN_PATTERN ([10aeaf6](10aeaf6))
* 🐛 bubble menu bind command_ button component events ([6c94328](6c94328))
* 🐛 bubble menu cut off by editor perimeter (#98) ([94d4415](94d4415))
* 🐛 bubble menu render error when select color ([80678e2](80678e2))
* 🐛 convert font-size style value to px (#128) ([b785780](b785780))
* 🐛 correct isListNode parameters types ([462475b](462475b))
* 🐛 editor content style ([52fd69c](52fd69c))
* 🐛 emit init event when editor instantiated ([41cf7d8](41cf7d8))
* 🐛 ensure heading extension attr level is number type ([a1d51aa](a1d51aa))
* 🐛 fix table created with reversed row and col (#86) ([7261d48](7261d48))
* 🐛 fix text highlight parseDOM (#59) ([b1dc509](b1dc509))
* 🐛 import clearMarks from utils ([dfbfb85](dfbfb85))
* 🐛 lock `prosemirror-model` version (#129) ([8af02e6](8af02e6))
* 🐛 missing alignment style separator (#120) ([5616818](5616818))
* **text_color:** 🐛 fix text color parser (#110) ([97353db](97353db))
* 🐛 missing `prosemirror-utils` dep ([d7625aa](d7625aa))
* **todo_item:** fix `TodoItem` checkbox unexpected render in preview modal (#73) ([c4a8860](c4a8860))
* 🐛 @ProvideReactive (#39) ([c5dc5b6](c5dc5b6))
* 🐛 fontawesome dependencies ([75baf34](75baf34))
* 🐛 register component ([8f9880a](8f9880a))
* 🐛 relative path ([a206b2e](a206b2e))
* 🐛 remove extensions ([9fc839e](9fc839e))
* 🐛 set color_popover box-sizing attribute border-box ([4056a23](4056a23))
* 🐛 spellcheck init in component partial usage (fix #31) ([8eb1e91](8eb1e91))
* 🐛 temporarily remove EditorView type check, #21 (comment) ([1232f26](1232f26)), closes [/github.com//issues/21#issuecomment-605615966](https://github.com//github.com/Leecason/element-tiptap/issues/21/issues/issuecomment-605615966)
* 🐛 tweak image tag from `image` to `img` (#79) ([627c5ab](627c5ab))
* 🐛 use `text-align` style instead `data-text-align` attr (#77) ([2998667](2998667))
* 🐛 zh indent typo (#55) ([5a1a948](5a1a948))
* **color:** 🐛 set color-item border-box ([8962c01](8962c01))
* **dialog:** 🐛 nested dialog ([bd83b9c](bd83b9c))
* **fullscreen:** 🐛 fix editor fullscreen width, height ([acc52dd](acc52dd))
* **fullscreen:** 🐛 use fixed position instead fullscreen API because the append-to-body element is invisble in fullscreen mode #21 (comment) ([042a22a](042a22a)), closes [/github.com//issues/21#issuecomment-605615794](https://github.com//github.com/Leecason/element-tiptap/issues/21/issues/issuecomment-605615794)
* **i18n:** 🐛 fix wrong polish translation ([d2bb414](d2bb414))
* 🐛 resolve error caused by import element-ui styles ([3454506](3454506))
* 🐛 transformLineHeightToCSS parameter types ([a49125c](a49125c))
* 🐛 type definitions ([228e972](228e972))
* 🐛 types attributes in package.json ([4dd78dc](4dd78dc))
* 🐛 unpack element-ui dropdown ([ee38e0d](ee38e0d))
* 🐛 use Message.prompt instead instance property ([dfe8aff](dfe8aff))
* 🐛 zh lang add_column_after typo ([19d9e10](19d9e10))
* 💄 blockquote margin ([c495a93](c495a93))
* 💄 border-box with command_button ([97d369f](97d369f))
* 💄 dropdown menu item active style ([29b2a5f](29b2a5f))
* 💄 editor content text-align, default to left ([0631364](0631364))
* 💄 line_height dropdown active item style ([0daaa38](0daaa38))
* 💄 safari menubar style bug ([d7803cd](d7803cd))
* 💄 tweak bubble menu position and style ([1c73e04](1c73e04))
* 📝 ProsemirrorNode typo ([524fdaf](524fdaf))
* 🔧 remove unnecessary peerDependencies ([f183a7b](f183a7b))
* typos in some labels ([ede1659](ede1659))
* **heading:** paragraph command in heading_dropdown not work ([46d161c](46d161c))
* **i18n:** 🌐 capitalize Heading paragraph button ([0dc3000](0dc3000))
* **i18n:** 🐛 rename $i18n -> t to fix conflict with vue-i18n ([650bf69](650bf69))
* **line-height:** clear_format shuold reset line_height ([2158ad6](2158ad6))
* **style:** 💄 reset default tag style ([6a18a95](6a18a95))

### Features

* ✨ add `CodeView` extension (#81) ([e2de3b2](e2de3b2))
* **editor:** add el-tiptap readonly prop ([9949163](9949163))
* **style:** add editor style file ([f2d38c8](f2d38c8))
* **style:** add editor style file ([20b2229](20b2229))
* **title:** ✨ make `Title` extension independent (#83) ([e2d7afb](e2d7afb))
* ✨ `Doc` extension support `title` option ([167dd88](167dd88))
* ✨ `Print` extension bind `Mod-p` keymap ([d231ac9](d231ac9))
* ✨ can set `menubar: false` to prevent the button from rendering in the menubar (#53) ([644d3dd](644d3dd))
* ✨ change prop editorProps to editorProperties (#47) ([66374dd](66374dd))
* ✨ new FontSize extension (#54) ([103ef46](103ef46))
* ✨ Spanish translation ([c1a7c5b](c1a7c5b))
* ✨ support `showMenubar` and `charCounterCount` props (#75) ([a8cb334](a8cb334))
* add i18n korean support ([d792b61](d792b61))
* **color:** ✨ new ui for color_picker, add [#000](https://github.com/Leecason/element-tiptap/issues/000) to default colorSet ([6954354](6954354))
* **color:** ✨ support hex color input ([648ea43](648ea43))
* **editor:** ✨ a new prop: editorProps, enable customize editor for yourself with it ([532e8a3](532e8a3))
* **editor:** ✨ add editor props: width, height (#23) ([1290fb0](1290fb0))
* **font-type:** ✨ add new extension FontType ([0c5bd28](0c5bd28))
* **i18n:** 🌐i18n pl support ([578c2fe](578c2fe))
* **i18n:** support german ([46bd42c](46bd42c))
* **image:** ✨ add image bubble menu, enable edit image alt, width, height ([9791533](9791533))
* **image:** ✨ enable update imgae display: float_left and float_right ([3adf51b](3adf51b))
* **image:** ✨ enable update imgae display: inline or break_text ([6f27fbd](6f27fbd))
* **image:** ✨ parse img dom to node, add img data-display style ([a6680a4](a6680a4))
* **image:** 💫 add image-view outline hover color ([655cef3](655cef3))
* **image:** 💫 improve image outline-color when resizing, try to resolve popover wrong position after edit size, add core func comments ([26f65ad](26f65ad))
* **image:** 💫 show loading when image uploading ([c915aea](c915aea))
* ✨ active fullscreen command_button if fullscreen ([54420d9](54420d9))
* ✨ add characters count to editor footer ([ede119e](ede119e))
* ✨ add Code extension ([dab5bdc](dab5bdc))
* ✨ add Fullscreen extension ([42a63e9](42a63e9))
* ✨ add Preview extension ([50a510e](50a510e))
* ✨ add Print extension ([9206135](9206135))
* ✨ add SelectAll extension ([1054270](1054270))
* ✨ add tiptap, tiptap-extensions, tiptap-commands types definitions ([f08165a](f08165a))
* ✨ add types folder for npm package ([dbc433d](dbc433d))
* ✨ edit link in bubble menu ([8b93b2c](8b93b2c))
* ✨ make image resizable ([d3523e7](d3523e7))
* ✨ open link in bubble menu ([8768f82](8768f82))
* ✨ select link when clicked ([825d8ca](825d8ca))
* ✨ show remove_image button when image selected ([095d5cd](095d5cd))
* ✨ spellcheck attribute for editor ([876c497](876c497))
* ✨ unlink in bubble menu ([d991841](d991841))
* ✨ vue add typescript ([bf3395a](bf3395a))
* 💄 editor characters style ([3261f3b](3261f3b))
* 💄 new ui for command button ([6e924cc](6e924cc))
* 💄 new ui for menubar and menububble ([5204444](5204444))
* 💄 pointer cursor for link ([e94085c](e94085c))
* Add russiang i18n locale ([9e7f241](9e7f241))
* **i18n:** 🌐 enable config lang when install plugin ([d5e1def](d5e1def))
* **i18n:** 🌐 support 'zh' lang ([09ab9df](09ab9df))
* **i18n:** 🌐 translate extension button tooltip ([22d458c](22d458c))
* **i18n:** 🌐 translate extension control text ([279247f](279247f))
* **line_height:** 💄 add line_height dropdown trigger to click ([b1d2d71](b1d2d71))
* **tooltip:** 💫 use el-zoom-in-bottom transition ([cbfcb2e](cbfcb2e))
* add TextHighlight extension ([715790e](715790e))
* autoInstall function for CDN usage ([b044ce6](b044ce6))
* enable cleart color in colorPopover ([62675d8](62675d8))
* **style:** add command button style file ([1f66c25](1f66c25))
* **style:** extract editor menu style ([d21c89d](d21c89d))
* refactor lineHeight extension, change default line_heights options, todo_list support textAlign and lineHeight ([dbac82c](dbac82c))
* **tooltip:** add arrow and open-delay ([ac7c65c](ac7c65c))
* **tooltip:** update tooltip text ([91d2c80](91d2c80))
* ✨ add FormatClear extension ([5f9530e](5f9530e))
* ✨ add iframe extension to insert embeds ([290ac2c](290ac2c))
* ✨ add paragraph dropdown-item in heading dropdown ([3996f60](3996f60))
* ✨ add table menu button and select table grid size popover ([7419071](7419071))
* ✨ add TextColor extension to change text color ([5bf2981](5bf2981))
* ✨ apply link ([b3d3295](b3d3295))
* ✨ base example route ([1b1a49d](1b1a49d))
* ✨ create table with custom row and col ([5b60281](5b60281))
* ✨ editor content prop ([de9585d](de9585d))
* ✨ editor placeholder ([6165a58](6165a58))
* ✨ editor placeholder prop ([a092923](a092923))
* ✨ emit events ([0444b44](0444b44))
* ✨ emit events and support v-model ([71d37a3](71d37a3))
* ✨ enable insert image by url ([70f7aae](70f7aae))
* ✨ enable insert row and column in table ([abfb489](abfb489))
* ✨ event route ([d76b404](d76b404))
* ✨ export ElTiptapPlugin ([281c4f9](281c4f9))
* ✨ footer slot ([d706fce](d706fce))
* ✨ image extension support httpRequest options ([fe236c5](fe236c5))
* ✨ line_height extension ([eb467e1](eb467e1))
* ✨ menu bubble ([40c2bd6](40c2bd6))
* ✨ menu bubble route ([0bcc936](0bcc936))
* ✨ merge cells and split cell in table ([c27d694](c27d694))
* ✨ output prop ([2f7cad5](2f7cad5))
* ✨ output route ([550fe2c](550fe2c))
* ✨ page style, add github link ([9f32208](9f32208))
* ✨ support custom necessary alignments ([2807f2d](2807f2d))
* ✨ support hard_break extension ([d3daa6a](d3daa6a))
* ✨ todo list ([6115c99](6115c99))
* ✨ upload image ([26ac703](26ac703))
* ✨ use vue-awesome instead [@FortAwesome](https://github.com/fortawesome) ([f22f0e3](f22f0e3))
* 🎨 beforeDestroy hook and onUpdate method ([55826ca](55826ca))
* 🎨 generate extensions ([da52e1e](da52e1e))
* 🎨 inject style in js file ([0fe9cf6](0fe9cf6))
* 🎨 menubar slot ([a300a4e](a300a4e))
* 🎨 on command import element components ([fea07f6](fea07f6))
* 🎨 use fontawesome vue component, remove CDN ([3a08a45](3a08a45))
* 💄 add logo ([74954f5](74954f5))
* 💄 homepage navigation style ([5710ccc](5710ccc))
* 💄 table colunm_resize_handle and selected_cell style ([5beb81d](5beb81d))
* 🔥 remove paragraph default menu button ([410b205](410b205))
* 🔧 package type ([4afe657](4afe657))
* 🚧 base editor, support bold, underline, italic, strike, undo, redo ([a728ccc](a728ccc))
* 🚧 paragraph command button ([d291a6f](d291a6f))
* 🚧 render editor content ([0d16cfc](0d16cfc))
* 🚧 support blockquote ([8b4dd26](8b4dd26))
* 🚧 support bullet_list and ordered_list ([c94f7e4](c94f7e4))
* 🚧 support code ([f9a3298](f9a3298))
* 🚧 support heading ([61b6e6c](61b6e6c))
* 🚧 support horizontal_rule, trailing_node ([a58fc9b](a58fc9b))
* 🚧 support indent, outdent ([7451271](7451271))
* 🚧 support text_align ([c47bec6](c47bec6))

### Reverts

* Revert "chore(release): 1.14.0 [skip ci]" ([c8e7a59](c8e7a59))
* Revert "chore: 🔧 .browserslistrc" ([6ca8736](6ca8736))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants