diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js index 33d5439b3c08ea3e9dfe0925cef274c90a71b700..276ba73cdf93d93ab92be057e6985cca144fc9cd 100644 --- a/editors/editoria/src/Editoria.js +++ b/editors/editoria/src/Editoria.js @@ -62,7 +62,10 @@ const Editoria = () => { autoFocus placeholder="Type Something..." fileUpload={file => renderImage(file)} - value={demo} + value={ + '<p>hello</p><p class="custom-tag-label-3" data-type="block">Lorem ipsum dolor si</p>' + } + // value={demo} // readonly layout={layout} // onChange={source => console.log(source)} diff --git a/editors/editoria/src/layout/EditorElements.js b/editors/editoria/src/layout/EditorElements.js index 7322e4916a73a35ac0b17e8af01f4a789377f98f..7b12c286d34057b78c1cadcdebb52223b74cd9e5 100644 --- a/editors/editoria/src/layout/EditorElements.js +++ b/editors/editoria/src/layout/EditorElements.js @@ -412,19 +412,19 @@ export default css` font-weight: 600; } - custom-tag-block { + p[data-type='block'] { display: block; margin-top: 1em; } - custom-tag-block:before { + p[data-type='block']:before { color: #006f19; content: '|'; display: inline; font-weight: 600; } - custom-tag-block:after { + p[data-type='block']:after { color: #006f19; content: '|'; display: inline; diff --git a/wax-prosemirror-schema/src/nodes/customBlockNode.js b/wax-prosemirror-schema/src/nodes/customBlockNode.js index 86d3bc95d53bc0f617c26803f807d8485f7cc661..076af0ef7daac842f1ebcfd2cfd131ee7648a952 100644 --- a/wax-prosemirror-schema/src/nodes/customBlockNode.js +++ b/wax-prosemirror-schema/src/nodes/customBlockNode.js @@ -5,21 +5,27 @@ const customBlockNode = { defining: true, attrs: { class: { default: '' }, + type: { default: 'block' }, }, parseDOM: [ { - tag: 'custom-tag-block', + tag: 'p[data-type="block"]', getAttrs(hook, next) { Object.assign(hook, { class: hook.dom.getAttribute('class'), + type: hook.dom.dataset.type, }); next(); }, }, ], toDOM(hook, next) { - const attrs = { class: hook.attrs.class }; - return (hook.value = ['custom-tag-block', attrs, 0]); + const attrs = { + class: hook.node.attrs.class, + 'data-type': hook.node.attrs.type, + }; + hook.value = ['p', attrs, 0]; + next(); }, }; diff --git a/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockService.js b/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockService.js index a867b59b87a1b45e0ad5781d48e6ad04589c424e..e4792a3e27af8bf65fcd8bebede1c964b67b1182 100644 --- a/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockService.js +++ b/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockService.js @@ -6,9 +6,12 @@ class CustomTagBlockService extends Service { register() { this.container.bind('CustomTagBlockTool').to(CustomTagBlockTool); const createNode = this.container.get('CreateNode'); - createNode({ - customTagBlock: customBlockNode, - }); + createNode( + { + customTagBlock: customBlockNode, + }, + { toWaxSchema: true }, + ); } }