diff --git a/dist/components/custom-mark/custom-mark.js b/dist/components/custom-mark/custom-mark.js index 8baea7e..349524c 100644 --- a/dist/components/custom-mark/custom-mark.js +++ b/dist/components/custom-mark/custom-mark.js @@ -16,32 +16,6 @@ let CustomMark = class CustomMark extends LitElement { // Issue only appears when reflect=true this.reflectedAttribute = 'default'; // default value to show how when prosemirror changes value, infitite loop is created. } - // public counter: number = 0; - // public maxCounter: number = 5; - // constructor(){ - // super(); - // /** - // * Chaging the attribute directly through webcomponent does not seem to casue an issue. - // */ - // this.onclick = () => { - // const value = Math.floor(Math.random() * Math.floor(10)); - // this.reflectedAttribute = String(value); - // }; - // } - // protected shouldUpdate(changedProperties: Map) { - // // const shouldUpdateComponent = false; - // // if (changedProperties.has('reflectedAttribute')){ - // // console.log(changedProperties.get('reflectedAttribute'), this.reflectedAttribute); - // // } - // // return shouldUpdateComponent; - // console.log('SHOULD UPDATE', changedProperties, this.getAttribute('reflected-attribute'), this.reflectedAttribute); - // // if (changedProperties.has('reflectedAttribute')) { - // // return this.getAttribute('reflected-attribute') !== changedProperties.get('reflectedAttribute'); - // // } - // return true; - // // this.counter++; - // // return this.counter < this.maxCounter; - // } render() { return html ` `; } diff --git a/dist/components/custom-mark/custom-mark.js.map b/dist/components/custom-mark/custom-mark.js.map index 0a4307d..688aed8 100644 --- a/dist/components/custom-mark/custom-mark.js.map +++ b/dist/components/custom-mark/custom-mark.js.map @@ -1 +1 @@ -{"version":3,"file":"custom-mark.js","sourceRoot":"","sources":["../../../src/client/components/custom-mark/custom-mark.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAEhD,yCAAyC;AAEzC,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAAlD;;QACI,uCAAuC;QAgBhC,uBAAkB,GAAW,SAAS,CAAC,CAAC,sFAAsF;IAoCzI,CAAC;IAlCG,8BAA8B;IAC9B,iCAAiC;IAEjC,iBAAiB;IACjB,eAAe;IACf,UAAU;IACV,8FAA8F;IAC9F,UAAU;IACV,6BAA6B;IAC7B,oEAAoE;IACpE,mDAAmD;IACnD,SAAS;IACT,IAAI;IAEJ,gEAAgE;IAChE,8CAA8C;IAC9C,2DAA2D;IAC3D,gGAAgG;IAChG,WAAW;IACX,uCAAuC;IACvC,0HAA0H;IAE1H,4DAA4D;IAC5D,8GAA8G;IAC9G,WAAW;IAEX,mBAAmB;IAEnB,6BAA6B;IAC7B,oDAAoD;IACpD,IAAI;IACM,MAAM;QACZ,OAAO,IAAI,CAAA,kBAAkB,CAAC;IAClC,CAAC;CACJ,CAAA;AApCG;IAfC,QAAQ,CAAC;QACN,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,qBAAqB;QAChC,OAAO,EAAE,IAAI;KAWhB,CAAC;;sDAC4C;AAjB7B,UAAU;IAD9B,aAAa,CAAC,gBAAgB,CAAC;GACX,UAAU,CAqD9B;eArDoB,UAAU"} \ No newline at end of file +{"version":3,"file":"custom-mark.js","sourceRoot":"","sources":["../../../src/client/components/custom-mark/custom-mark.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAEhD,yCAAyC;AAEzC,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAAlD;;QACI,uCAAuC;QAMhC,uBAAkB,GAAW,SAAS,CAAC,CAAC,sFAAsF;IAKzI,CAAC;IAHa,MAAM;QACZ,OAAO,IAAI,CAAA,kBAAkB,CAAC;IAClC,CAAC;CACJ,CAAA;AALG;IALC,QAAQ,CAAC;QACN,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,qBAAqB;QAChC,OAAO,EAAE,IAAI;KAChB,CAAC;;sDAC4C;AAP7B,UAAU;IAD9B,aAAa,CAAC,gBAAgB,CAAC;GACX,UAAU,CAY9B;eAZoB,UAAU"} \ No newline at end of file diff --git a/dist/components/editor/CustomMarkView.js b/dist/components/editor/CustomMarkView.js index 56026a9..85a926b 100644 --- a/dist/components/editor/CustomMarkView.js +++ b/dist/components/editor/CustomMarkView.js @@ -5,19 +5,15 @@ export class CustomMarkView { this.view = view; this.getPos = getPos; this.decorations = decorations; - const container = document.createElement('div'); - container.innerHTML = ` - ${node.attrs.inner} - `; - this.dom = container.firstElementChild; + const el = document.createElement('my-custom-mark'); + el.setAttribute('reflected-attribute', node.attrs['reflected-attribute']); + el.innerHTML = node.attrs.inner; + this.dom = el; this.observeMutations(); } observeMutations() { const observer = new MutationObserver((mutations) => { this.updateProseNodeAttributes(mutations); - //this.view.state.tr.setNodeMarkup(this.getPos(), undefined, this.node.attrs); }); observer.observe(this.dom, { attributes: true, attributeOldValue: true, childList: true }); } @@ -25,13 +21,6 @@ export class CustomMarkView { mutations.forEach((mutation) => { this.node.attrs[mutation.attributeName] = this.dom.getAttribute(mutation.attributeName); }); - // if ( - // mutations.filter((mutation: MutationRecord) => { - // return mutation.type === "childList"; - // }) - // ) { - // this.node.attrs["inner"] = this.dom.innerHTML; - // } } stopEvent() { return true; diff --git a/dist/components/editor/CustomMarkView.js.map b/dist/components/editor/CustomMarkView.js.map index 80b4f93..8706773 100644 --- a/dist/components/editor/CustomMarkView.js.map +++ b/dist/components/editor/CustomMarkView.js.map @@ -1 +1 @@ -{"version":3,"file":"CustomMarkView.js","sourceRoot":"","sources":["../../../src/client/components/editor/CustomMarkView.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,OAAO,cAAc;IAOvB,YAAY,IAAe,EAAE,IAAgB,EAAE,MAAoB,EAAE,WAAyB;QAC1F,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAE/B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,SAAS,CAAC,SAAS,GAAG;cAChB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;cAErG,IAAI,CAAC,KAAK,CAAC,KAAK;0BACJ,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,iBAAgC,CAAC;QAEtD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAES,gBAAgB;QACtB,MAAM,QAAQ,GAAqB,IAAI,gBAAgB,CAAC,CAAC,SAA2B,EAAE,EAAE;YACpF,IAAI,CAAC,yBAAyB,CAAC,SAAS,CAAC,CAAC;YAC1C,8EAA8E;QAClF,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/F,CAAC;IAEM,yBAAyB,CAAC,SAA2B;QACxD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAwB,EAAE,EAAE;YAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5F,CAAC,CAAC,CAAC;QAEH,OAAO;QACP,uDAAuD;QACvD,gDAAgD;QAChD,SAAS;QACT,MAAM;QACN,qDAAqD;QACrD,IAAI;IACR,CAAC;IAED,SAAS;QACL,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,SAAS;QACZ,OAAO,IAAI,MAAM,CAAC;YACd,KAAK,EAAE;gBACH,SAAS,EAAE;oBACP,YAAY,CAAC,IAAe,EAAE,IAAgB,EAAE,MAAoB,EAAE,WAAyB;wBAC3F,OAAO,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;oBAC/D,CAAC;iBACJ;aACJ;SACJ,CAAC,CAAC;IACP,CAAC;CACJ"} \ No newline at end of file +{"version":3,"file":"CustomMarkView.js","sourceRoot":"","sources":["../../../src/client/components/editor/CustomMarkView.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,OAAO,cAAc;IAOvB,YAAY,IAAe,EAAE,IAAgB,EAAE,MAAoB,EAAE,WAAyB;QAC1F,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAE/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACpD,EAAE,CAAC,YAAY,CAAC,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;QAC1E,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAES,gBAAgB;QACtB,MAAM,QAAQ,GAAqB,IAAI,gBAAgB,CAAC,CAAC,SAA2B,EAAE,EAAE;YACpF,IAAI,CAAC,yBAAyB,CAAC,SAAS,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/F,CAAC;IAEM,yBAAyB,CAAC,SAA2B;QACxD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAwB,EAAE,EAAE;YAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5F,CAAC,CAAC,CAAC;IACP,CAAC;IAED,SAAS;QACL,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,SAAS;QACZ,OAAO,IAAI,MAAM,CAAC;YACd,KAAK,EAAE;gBACH,SAAS,EAAE;oBACP,YAAY,CAAC,IAAe,EAAE,IAAgB,EAAE,MAAoB,EAAE,WAAyB;wBAC3F,OAAO,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;oBAC/D,CAAC;iBACJ;aACJ;SACJ,CAAC,CAAC;IACP,CAAC;CACJ"} \ No newline at end of file diff --git a/dist/components/editor/marks.js b/dist/components/editor/marks.js index 26d0bdf..e2169da 100644 --- a/dist/components/editor/marks.js +++ b/dist/components/editor/marks.js @@ -1,34 +1,3 @@ -// :: Object [Specs](#model.MarkSpec) for the marks in the schema. -let counter = 0; -// const getAttrs = (dom: HTMLElement): { [attr: string]: string } => { -// return { -// 'reflected-attribute': dom.getAttribute('reflected-attribute') || 'default', -// }; -// }; -// const myCustomMark: MarkSpec = { -// parseDOM: [ -// { -// tag: 'my-custom-mark', -// getAttrs, -// preserveWhitespace: true -// }, -// ], -// attrs: { -// 'reflected-attribute': { default: 'default' }, -// }, -// getAttrs, -// toDOM(mark: MarkSpec): DOMOutputSpec { -// console.log('ProseMirror:', 'toDOM(mark: MarkSpec)', ' mark: ', mark); -// counter++; -// if (counter > 100){throw new Error('oups'); } -// const attrs: { [attr: string]: string } = {} -// if(mark.attrs['reflected-attribute']) { -// //@ts-ignore -// attrs['reflected-attribute'] = mark.attrs['reflected-attribute']; -// } -// return ['my-custom-mark', attrs]; -// } -// } const myCustomMark = { attrs: { 'reflected-attribute': { default: 'default' }, @@ -36,51 +5,10 @@ const myCustomMark = { parseDOM: [ { tag: 'my-custom-mark[reflected-attribute]', - getAttrs(dom) { - return { 'reflected-attribute': dom.getAttribute('reflected-attribute') }; - }, }, ], - toDOM(node) { - console.log('ProseMirror:', 'toDOM(mark: MarkSpec)', ' mark: ', node); - counter++; - if (counter > 100) { - throw new Error('oups'); - } - return ['my-custom-mark', node.attrs, 0]; - }, }; export const marks = { - // :: MarkSpec A link. Has `href` and `title` attributes. `title` - // defaults to the empty string. Rendered and parsed as an `` - // element. myCustomMark, }; -/* - - -const getAttrs = (dom: HTMLElement): { [attr: string]: string } => { - return { - 'view-mode': dom.getAttribute('view-mode') || 'editing', - }; -}; - -const toDOM = (): DOMOutputSpec => { - return ['xray-trigger', 0]; -}; - -export const xrayTrigger: MarkSpec = { - attrs: { - 'view-mode': { default: 'editing' }, - }, - parseDOM: [ - { - tag: 'xray-trigger', - getAttrs, - }, - ], - toDOM, -}; - -*/ //# sourceMappingURL=marks.js.map \ No newline at end of file diff --git a/dist/components/editor/marks.js.map b/dist/components/editor/marks.js.map index 549e91d..9d79d83 100644 --- a/dist/components/editor/marks.js.map +++ b/dist/components/editor/marks.js.map @@ -1 +1 @@ -{"version":3,"file":"marks.js","sourceRoot":"","sources":["../../../src/client/components/editor/marks.ts"],"names":[],"mappings":"AACA,kEAAkE;AAElE,IAAI,OAAO,GAAG,CAAC,CAAC;AAEhB,uEAAuE;AACvE,eAAe;AACf,uFAAuF;AACvF,SAAS;AACT,KAAK;AAEL,mCAAmC;AACnC,kBAAkB;AAClB,YAAY;AACZ,qCAAqC;AACrC,wBAAwB;AACxB,uCAAuC;AACvC,aAAa;AACb,SAAS;AACT,eAAe;AACf,yDAAyD;AACzD,SAAS;AACT,gBAAgB;AAChB,6CAA6C;AAC7C,iFAAiF;AACjF,qBAAqB;AAErB,yDAAyD;AACzD,wDAAwD;AAExD,kDAAkD;AAClD,2BAA2B;AAC3B,gFAAgF;AAChF,YAAY;AACZ,4CAA4C;AAC5C,QAAQ;AACR,IAAI;AAEJ,MAAM,YAAY,GAAa;IAC3B,KAAK,EAAE;QACH,qBAAqB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChD;IACD,QAAQ,EAAE;QACN;YACI,GAAG,EAAE,qCAAqC;YAC1C,QAAQ,CAAC,GAAgB;gBACrB,OAAO,EAAE,qBAAqB,EAAE,GAAG,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE,CAAC;YAC9E,CAAC;SACJ;KACJ;IACD,KAAK,CAAC,IAAI;QACN,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,uBAAuB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACtE,OAAO,EAAE,CAAC;QACV,IAAI,OAAO,GAAG,GAAG,EAAE;YACf,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC;SAC3B;QAED,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7C,CAAC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAgC;IAC9C,iEAAiE;IACjE,gEAAgE;IAChE,WAAW;IACX,YAAY;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BE"} \ No newline at end of file +{"version":3,"file":"marks.js","sourceRoot":"","sources":["../../../src/client/components/editor/marks.ts"],"names":[],"mappings":"AAEA,MAAM,YAAY,GAAa;IAC3B,KAAK,EAAE;QACH,qBAAqB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChD;IACD,QAAQ,EAAE;QACN;YACI,GAAG,EAAE,qCAAqC;SAC7C;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAgC;IAC9C,YAAY;CACf,CAAC"} \ No newline at end of file diff --git a/index.html b/index.html index 4f4e128..a88c225 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,12 @@

some text here - custom mark + first custom mark - custom mark - some italic text + + with some more text in between + second custom mark + and also some italic text

diff --git a/package-lock.json b/package-lock.json index 5605d04..cc6fb59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,14 @@ "browserslist": "^4.9.1", "invariant": "^2.2.4", "semver": "^5.5.0" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } } }, "@babel/core": { @@ -46,6 +54,14 @@ "resolve": "^1.3.2", "semver": "^5.4.1", "source-map": "^0.5.0" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } } }, "@babel/generator": { @@ -90,6 +106,14 @@ "invariant": "^2.2.4", "levenary": "^1.1.1", "semver": "^5.5.0" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } } }, "@babel/helper-create-regexp-features-plugin": { @@ -863,6 +887,14 @@ "invariant": "^2.2.2", "levenary": "^1.1.1", "semver": "^5.5.0" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } } }, "@babel/preset-modules": { @@ -1133,14 +1165,6 @@ "lodash": "^4.17.15", "semver": "^6.3.0", "tsutils": "^3.17.1" - }, - "dependencies": { - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - } } }, "@webcomponents/shadycss": { @@ -1280,9 +1304,9 @@ } }, "babel-plugin-dynamic-import-node": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.1.tgz", - "integrity": "sha512-q9YOcbDnAiq5Rn+rM3EWZJ1kgDQxJdJwjJZbPxJYm9NdBJnL4Vs4BM/ofx5TwIUWSw8T9nBpn3RRjyTKMcM/pw==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.2.tgz", + "integrity": "sha512-yvczAMjbc73xira9yTyF1XnEmkX8QwlUhmxuhimeMUeAaA6s7busTPRVDzhVG7eeBdNcRiZ/mAwFrJ9It4vQcg==", "dev": true, "requires": { "object.assign": "^4.1.0" @@ -1326,13 +1350,13 @@ } }, "browserslist": { - "version": "4.11.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.11.1.tgz", - "integrity": "sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz", + "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001038", - "electron-to-chromium": "^1.3.390", + "caniuse-lite": "^1.0.30001043", + "electron-to-chromium": "^1.3.413", "node-releases": "^1.1.53", "pkg-up": "^2.0.0" } @@ -1346,14 +1370,6 @@ "browserslist": "^4.6.6", "semver": "^6.3.0", "useragent": "^2.3.0" - }, - "dependencies": { - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - } } }, "buffer-from": { @@ -1419,9 +1435,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001043", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001043.tgz", - "integrity": "sha512-MrBDRPJPDBYwACtSQvxg9+fkna5jPXhJlKmuxenl/ml9uf8LHKlDmLpElu+zTW/bEz7lC1m0wTDD7jiIB+hgFg==", + "version": "1.0.30001045", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001045.tgz", + "integrity": "sha512-Y8o2Iz1KPcD6FjySbk1sPpvJqchgxk/iow0DABpGyzA1UeQAuxh63Xh0Enj5/BrsYbXtCN32JmR4ZxQTCQ6E6A==", "dev": true }, "chalk": { @@ -1669,6 +1685,14 @@ "semver": "^5.5.0", "shebang-command": "^1.2.0", "which": "^1.2.9" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } } }, "debounce": { @@ -1771,9 +1795,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.413", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.413.tgz", - "integrity": "sha512-Jm1Rrd3siqYHO3jftZwDljL2LYQafj3Kki5r+udqE58d0i91SkjItVJ5RwlJn9yko8i7MOcoidVKjQlgSdd1hg==", + "version": "1.3.414", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.414.tgz", + "integrity": "sha512-UfxhIvED++qLwWrAq9uYVcqF8FdeV9sU2S7qhiHYFODxzXRrd1GZRl/PjITHsTEejgibcWDraD8TQqoHb1aCBQ==", "dev": true }, "emoji-regex": { @@ -1948,12 +1972,6 @@ "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz", "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", "dev": true - }, - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true } } }, @@ -3409,9 +3427,9 @@ } }, "prosemirror-view": { - "version": "1.14.6", - "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.14.6.tgz", - "integrity": "sha512-0qNSFWVBHPrdQaZtIO3aou/NRsxMGER3IuI3cePHYbk5pf9wSsbMIWWaeHtXqblL+rqtgkLfcw0D2na6+WBgpA==", + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.14.7.tgz", + "integrity": "sha512-ZCRbGAmJa0ORIY4xrDvOpxS/oAnph3egDauvQEI7SX4eex0zovUfC61I5X4AtPCaNN4JpLWEk60voCWi0cE2vA==", "requires": { "prosemirror-model": "^1.1.0", "prosemirror-state": "^1.0.0", @@ -3665,9 +3683,9 @@ "dev": true }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, "setprototypeof": { diff --git a/src/client/components/custom-mark/custom-mark.ts b/src/client/components/custom-mark/custom-mark.ts index 00d8e65..e077694 100644 --- a/src/client/components/custom-mark/custom-mark.ts +++ b/src/client/components/custom-mark/custom-mark.ts @@ -9,50 +9,9 @@ export default class CustomMark extends LitElement { type: String, attribute: 'reflected-attribute', reflect: true, - // converter: { - // toAttribute: (value: string, type: String) => { - // console.log(tag, ': ', 'property converter toAttribute value: ', value); - // return value; - // }, - // fromAttribute: (value: string, type: String) => { - // console.log(tag, ': ', 'property converter fromAttribute: ', value); - // return value; - // } - // } }) public reflectedAttribute: string = 'default'; // default value to show how when prosemirror changes value, infitite loop is created. - // public counter: number = 0; - // public maxCounter: number = 5; - - // constructor(){ - // super(); - // /** - // * Chaging the attribute directly through webcomponent does not seem to casue an issue. - // */ - // this.onclick = () => { - // const value = Math.floor(Math.random() * Math.floor(10)); - // this.reflectedAttribute = String(value); - // }; - // } - - // protected shouldUpdate(changedProperties: Map) { - // // const shouldUpdateComponent = false; - // // if (changedProperties.has('reflectedAttribute')){ - // // console.log(changedProperties.get('reflectedAttribute'), this.reflectedAttribute); - // // } - // // return shouldUpdateComponent; - // console.log('SHOULD UPDATE', changedProperties, this.getAttribute('reflected-attribute'), this.reflectedAttribute); - - // // if (changedProperties.has('reflectedAttribute')) { - // // return this.getAttribute('reflected-attribute') !== changedProperties.get('reflectedAttribute'); - // // } - - // return true; - - // // this.counter++; - // // return this.counter < this.maxCounter; - // } protected render(): TemplateResult { return html` `; } diff --git a/src/client/components/editor/CustomMarkView.ts b/src/client/components/editor/CustomMarkView.ts index a061159..330528d 100644 --- a/src/client/components/editor/CustomMarkView.ts +++ b/src/client/components/editor/CustomMarkView.ts @@ -15,21 +15,16 @@ export class CustomMarkView implements NodeView { this.getPos = getPos; this.decorations = decorations; - const container = document.createElement('div'); - container.innerHTML = ` - ${node.attrs.inner} - `; - this.dom = container.firstElementChild as HTMLElement; - + const el = document.createElement('my-custom-mark'); + el.setAttribute('reflected-attribute', node.attrs['reflected-attribute']); + el.innerHTML = node.attrs.inner; + this.dom = el; this.observeMutations(); } protected observeMutations(): void { const observer: MutationObserver = new MutationObserver((mutations: MutationRecord[]) => { this.updateProseNodeAttributes(mutations); - //this.view.state.tr.setNodeMarkup(this.getPos(), undefined, this.node.attrs); }); observer.observe(this.dom, { attributes: true, attributeOldValue: true, childList: true }); } @@ -38,14 +33,6 @@ export class CustomMarkView implements NodeView { mutations.forEach((mutation: MutationRecord) => { this.node.attrs[mutation.attributeName] = this.dom.getAttribute(mutation.attributeName); }); - - // if ( - // mutations.filter((mutation: MutationRecord) => { - // return mutation.type === "childList"; - // }) - // ) { - // this.node.attrs["inner"] = this.dom.innerHTML; - // } } stopEvent(): boolean { diff --git a/src/client/components/editor/marks.ts b/src/client/components/editor/marks.ts index 94179bd..b5d5004 100644 --- a/src/client/components/editor/marks.ts +++ b/src/client/components/editor/marks.ts @@ -1,40 +1,4 @@ -import { DOMOutputSpec, MarkSpec } from 'prosemirror-model'; -// :: Object [Specs](#model.MarkSpec) for the marks in the schema. - -let counter = 0; - -// const getAttrs = (dom: HTMLElement): { [attr: string]: string } => { -// return { -// 'reflected-attribute': dom.getAttribute('reflected-attribute') || 'default', -// }; -// }; - -// const myCustomMark: MarkSpec = { -// parseDOM: [ -// { -// tag: 'my-custom-mark', -// getAttrs, -// preserveWhitespace: true -// }, -// ], -// attrs: { -// 'reflected-attribute': { default: 'default' }, -// }, -// getAttrs, -// toDOM(mark: MarkSpec): DOMOutputSpec { -// console.log('ProseMirror:', 'toDOM(mark: MarkSpec)', ' mark: ', mark); -// counter++; - -// if (counter > 100){throw new Error('oups'); } -// const attrs: { [attr: string]: string } = {} - -// if(mark.attrs['reflected-attribute']) { -// //@ts-ignore -// attrs['reflected-attribute'] = mark.attrs['reflected-attribute']; -// } -// return ['my-custom-mark', attrs]; -// } -// } +import { MarkSpec } from 'prosemirror-model'; const myCustomMark: MarkSpec = { attrs: { @@ -43,53 +7,10 @@ const myCustomMark: MarkSpec = { parseDOM: [ { tag: 'my-custom-mark[reflected-attribute]', - getAttrs(dom: HTMLElement) { - return { 'reflected-attribute': dom.getAttribute('reflected-attribute') }; - }, }, ], - toDOM(node): DOMOutputSpec { - console.log('ProseMirror:', 'toDOM(mark: MarkSpec)', ' mark: ', node); - counter++; - if (counter > 100) { - throw new Error('oups'); - } - - return ['my-custom-mark', node.attrs, 0]; - }, }; export const marks: { [key: string]: MarkSpec } = { - // :: MarkSpec A link. Has `href` and `title` attributes. `title` - // defaults to the empty string. Rendered and parsed as an `` - // element. myCustomMark, }; - -/* - - -const getAttrs = (dom: HTMLElement): { [attr: string]: string } => { - return { - 'view-mode': dom.getAttribute('view-mode') || 'editing', - }; -}; - -const toDOM = (): DOMOutputSpec => { - return ['xray-trigger', 0]; -}; - -export const xrayTrigger: MarkSpec = { - attrs: { - 'view-mode': { default: 'editing' }, - }, - parseDOM: [ - { - tag: 'xray-trigger', - getAttrs, - }, - ], - toDOM, -}; - -*/