diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js index 276ba73cdf93d93ab92be057e6985cca144fc9cd..76c7c14096177bff855fcdfee73824a95a19caa4 100644 --- a/editors/editoria/src/Editoria.js +++ b/editors/editoria/src/Editoria.js @@ -52,6 +52,11 @@ const Editoria = () => { key = 'editoriaMobile'; } + console.log(JSON.stringify('["test"]')); + // console.log( + // JSON.parse('[{"item":"custom-tag-label-1"}]'), + // ); + const EditoriaComponent = useMemo( () => ( <> @@ -62,13 +67,11 @@ const Editoria = () => { autoFocus placeholder="Type Something..." fileUpload={file => renderImage(file)} - value={ - '<p>hello</p><p class="custom-tag-label-3" data-type="block">Lorem ipsum dolor si</p>' - } + value={`<p class="paragraph">hello</p><p class="custom-tag-label-3" data-type="block">Lorem this is <span class="custom-tag-label-1,custom-tag-label-2" data-type="inline" data-tags="["custom-tag-label-1","custom-tag-label-2"]">text </span>dolor si</p>`} // value={demo} // readonly layout={layout} - // onChange={source => console.log(source)} + onChange={source => console.log(source)} user={user} /> </> diff --git a/editors/editoria/src/layout/EditorElements.js b/editors/editoria/src/layout/EditorElements.js index 7b12c286d34057b78c1cadcdebb52223b74cd9e5..e2e896a3663293f4913c2f9e692fd45ce1d3a1a2 100644 --- a/editors/editoria/src/layout/EditorElements.js +++ b/editors/editoria/src/layout/EditorElements.js @@ -393,19 +393,19 @@ export default css` padding-top: 2px; } - .custom-tag-inline { + span[data-type='inline'] { display: inline; font-weight: 500; } - custom-tag-inline:before { + span[data-type='inline']:before { color: #006f19; content: ' | '; font-weight: 600; margin-left: 0; } - custom-tag-inline:after { + span[data-type='inline']:after { color: #006f19; content: ' | '; display: inline; diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js b/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js index 730ce240ea205b9d61d533d569dd7459c5a21e6b..3013a68783ac7d0c3e5af7deb7b356a4778abe4f 100644 --- a/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js +++ b/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js @@ -128,8 +128,8 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => { }; const addToSelection = item => { - const tagNames = mark ? mark.attrs.tagNames : []; - tagNames.push(item); + const tags = mark ? mark.attrs.tags : []; + tags.push(item); dispatch( state.tr.addMark( @@ -137,8 +137,8 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => { $to.pos, state.schema.marks.customTagInline.create({ ...((mark && mark.attrs) || {}), - tagNames, - class: tagNames.toString(), + tags, + class: tags.toString(), }), ), ); diff --git a/wax-prosemirror-schema/src/marks/customTagInlineMark.js b/wax-prosemirror-schema/src/marks/customTagInlineMark.js index f11a0ef973aabedf369ddf07c46e5c144b3ba9a4..62acd1dd0c9a06f51ef53b3c832a5b03140bc143 100644 --- a/wax-prosemirror-schema/src/marks/customTagInlineMark.js +++ b/wax-prosemirror-schema/src/marks/customTagInlineMark.js @@ -1,16 +1,18 @@ const customtagInline = { attrs: { class: { default: null }, - tagNames: { default: [] }, + tags: [], + type: { default: 'inline' }, }, inclusive: false, parseDOM: [ { - tag: 'custom-tag-inline', + tag: 'span[data-type="inline"]', getAttrs(hook, next) { Object.assign(hook, { class: hook.dom.getAttribute('class'), - tagNames: JSON.parse(hook.dom.dataset.tagNames), + tags: JSON.parse(hook.dom.dataset.tags), + type: hook.dom.dataset.type, }); next(); }, @@ -19,10 +21,11 @@ const customtagInline = { toDOM(hook, next) { // eslint-disable-next-line no-param-reassign hook.value = [ - 'custom-tag-inline', + 'span', { class: hook.node.attrs.class, - 'data-tagNames': JSON.stringify(hook.node.attrs.tagNames), + 'data-type': hook.node.attrs.type, + 'data-tags': JSON.stringify(hook.node.attrs.tags), }, ]; next();