2021-04-29 00:09:48 +00:00
|
|
|
/* eslint-disable no-underscore-dangle */
|
|
|
|
export class ContentEditor {
|
2022-05-05 18:08:40 +00:00
|
|
|
constructor({ tiptapEditor, serializer, deserializer, assetResolver, eventHub }) {
|
2021-04-29 00:09:48 +00:00
|
|
|
this._tiptapEditor = tiptapEditor;
|
|
|
|
this._serializer = serializer;
|
2022-02-28 06:16:06 +00:00
|
|
|
this._deserializer = deserializer;
|
2022-02-24 15:15:02 +00:00
|
|
|
this._eventHub = eventHub;
|
2022-05-05 15:08:47 +00:00
|
|
|
this._assetResolver = assetResolver;
|
2022-05-11 00:08:02 +00:00
|
|
|
this._pristineDoc = null;
|
2021-04-29 00:09:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get tiptapEditor() {
|
|
|
|
return this._tiptapEditor;
|
|
|
|
}
|
|
|
|
|
2022-02-24 15:15:02 +00:00
|
|
|
get eventHub() {
|
|
|
|
return this._eventHub;
|
|
|
|
}
|
|
|
|
|
2022-05-11 00:08:02 +00:00
|
|
|
get changed() {
|
2022-09-08 21:13:09 +00:00
|
|
|
if (!this._pristineDoc) {
|
|
|
|
return !this.empty;
|
|
|
|
}
|
|
|
|
|
|
|
|
return !this._pristineDoc.eq(this.tiptapEditor.state.doc);
|
2022-05-11 00:08:02 +00:00
|
|
|
}
|
|
|
|
|
2021-06-08 18:10:23 +00:00
|
|
|
get empty() {
|
2022-09-08 21:13:09 +00:00
|
|
|
return this.tiptapEditor.isEmpty;
|
|
|
|
}
|
2021-06-08 18:10:23 +00:00
|
|
|
|
2022-09-08 21:13:09 +00:00
|
|
|
get editable() {
|
|
|
|
return this.tiptapEditor.isEditable;
|
2021-06-08 18:10:23 +00:00
|
|
|
}
|
|
|
|
|
2021-08-12 21:10:33 +00:00
|
|
|
dispose() {
|
|
|
|
this.tiptapEditor.destroy();
|
|
|
|
}
|
|
|
|
|
2021-08-06 15:10:05 +00:00
|
|
|
disposeAllEvents() {
|
|
|
|
this._eventHub.dispose();
|
|
|
|
}
|
|
|
|
|
2022-07-14 12:08:33 +00:00
|
|
|
deserialize(markdown) {
|
2022-05-05 15:08:47 +00:00
|
|
|
const { _tiptapEditor: editor, _deserializer: deserializer } = this;
|
|
|
|
|
|
|
|
return deserializer.deserialize({
|
|
|
|
schema: editor.schema,
|
2022-07-14 12:08:33 +00:00
|
|
|
markdown,
|
2022-05-05 15:08:47 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-05-06 00:07:56 +00:00
|
|
|
resolveUrl(canonicalSrc) {
|
2022-05-05 15:08:47 +00:00
|
|
|
return this._assetResolver.resolveUrl(canonicalSrc);
|
|
|
|
}
|
|
|
|
|
2022-06-16 12:09:26 +00:00
|
|
|
renderDiagram(code, language) {
|
|
|
|
return this._assetResolver.renderDiagram(code, language);
|
|
|
|
}
|
|
|
|
|
2022-09-08 21:13:09 +00:00
|
|
|
setEditable(editable = true) {
|
|
|
|
this._tiptapEditor.setOptions({
|
|
|
|
editable,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-04-29 00:09:48 +00:00
|
|
|
async setSerializedContent(serializedContent) {
|
2022-09-08 21:13:09 +00:00
|
|
|
const { _tiptapEditor: editor } = this;
|
2022-02-28 06:16:06 +00:00
|
|
|
const { doc, tr } = editor.state;
|
2021-04-29 00:09:48 +00:00
|
|
|
|
2022-09-08 21:13:09 +00:00
|
|
|
const { document } = await this.deserialize(serializedContent);
|
2022-03-23 12:07:27 +00:00
|
|
|
|
2022-09-08 21:13:09 +00:00
|
|
|
if (document) {
|
|
|
|
this._pristineDoc = document;
|
|
|
|
tr.replaceWith(0, doc.content.size, document).setMeta('preventUpdate', true);
|
|
|
|
editor.view.dispatch(tr);
|
2021-08-06 15:10:05 +00:00
|
|
|
}
|
2021-04-29 00:09:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
getSerializedContent() {
|
2022-05-11 00:08:02 +00:00
|
|
|
const { _tiptapEditor: editor, _serializer: serializer, _pristineDoc: pristineDoc } = this;
|
|
|
|
const { doc } = editor.state;
|
2021-04-29 00:09:48 +00:00
|
|
|
|
2022-05-11 00:08:02 +00:00
|
|
|
return serializer.serialize({ doc, pristineDoc });
|
2021-04-29 00:09:48 +00:00
|
|
|
}
|
|
|
|
}
|