diff --git a/.eslintignore b/.eslintignore index e4d02c4de9..f5394bbeef 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1104,6 +1104,7 @@ packages/editor/ProseMirror/types.js packages/editor/ProseMirror/utils/UndoStackSynchronizer.js packages/editor/ProseMirror/utils/canReplaceSelectionWith.js packages/editor/ProseMirror/utils/computeSelectionFormatting.js +packages/editor/ProseMirror/utils/dom/createButton.js packages/editor/ProseMirror/utils/dom/createTextArea.js packages/editor/ProseMirror/utils/dom/createTextNode.js packages/editor/ProseMirror/utils/dom/createUniqueId.js diff --git a/.gitignore b/.gitignore index faa8cef07b..b05caa8a32 100644 --- a/.gitignore +++ b/.gitignore @@ -1077,6 +1077,7 @@ packages/editor/ProseMirror/types.js packages/editor/ProseMirror/utils/UndoStackSynchronizer.js packages/editor/ProseMirror/utils/canReplaceSelectionWith.js packages/editor/ProseMirror/utils/computeSelectionFormatting.js +packages/editor/ProseMirror/utils/dom/createButton.js packages/editor/ProseMirror/utils/dom/createTextArea.js packages/editor/ProseMirror/utils/dom/createTextNode.js packages/editor/ProseMirror/utils/dom/createUniqueId.js diff --git a/packages/editor/ProseMirror/plugins/joplinEditablePlugin/createEditorDialog.ts b/packages/editor/ProseMirror/plugins/joplinEditablePlugin/createEditorDialog.ts index cb810ecfc6..be989224e7 100644 --- a/packages/editor/ProseMirror/plugins/joplinEditablePlugin/createEditorDialog.ts +++ b/packages/editor/ProseMirror/plugins/joplinEditablePlugin/createEditorDialog.ts @@ -13,14 +13,16 @@ interface Options { doneLabel: string|Promise; block: SourceBlockData; onSave: (newContent: SourceBlockData)=> void; + onDismiss: ()=> void; } -const createEditorDialog = ({ editorLabel, doneLabel, block, onSave }: Options) => { +const createEditorDialog = ({ editorLabel, doneLabel, block, onSave, onDismiss }: Options) => { const dialog = document.createElement('dialog'); dialog.classList.add('editor-dialog', '-visible'); document.body.appendChild(dialog); dialog.onclose = () => { + onDismiss(); dialog.remove(); }; diff --git a/packages/editor/ProseMirror/plugins/joplinEditablePlugin/joplinEditablePlugin.ts b/packages/editor/ProseMirror/plugins/joplinEditablePlugin/joplinEditablePlugin.ts index 7271c0014c..3f2edd7365 100644 --- a/packages/editor/ProseMirror/plugins/joplinEditablePlugin/joplinEditablePlugin.ts +++ b/packages/editor/ProseMirror/plugins/joplinEditablePlugin/joplinEditablePlugin.ts @@ -5,8 +5,8 @@ import sanitizeHtml from '../../utils/sanitizeHtml'; import createEditorDialog from './createEditorDialog'; import { getEditorApi } from '../joplinEditorApiPlugin'; import { msleep } from '@joplin/utils/time'; -import createTextNode from '../../utils/dom/createTextNode'; import postProcessRenderedHtml from './postProcessRenderedHtml'; +import createButton from '../../utils/dom/createButton'; import makeLinksClickableInElement from '../../utils/makeLinksClickableInElement'; // See the fold example for more information about @@ -117,6 +117,7 @@ export const nodeSpecs = { type GetPosition = ()=> number; class EditableSourceBlockView implements NodeView { + private editDialogVisible_ = false; public readonly dom: HTMLElement; public constructor(private node: Node, inline: boolean, private view: EditorView, private getPosition: GetPosition) { if ((node.attrs.contentHtml ?? undefined) === undefined) { @@ -134,6 +135,10 @@ class EditableSourceBlockView implements NodeView { } private showEditDialog_() { + if (this.editDialogVisible_) { + return; + } + const { localize: _ } = getEditorApi(this.view.state); let saveCounter = 0; @@ -177,6 +182,9 @@ class EditableSourceBlockView implements NodeView { ), ); }, + onDismiss: () => { + this.editDialogVisible_ = false; + }, }); } @@ -187,16 +195,10 @@ class EditableSourceBlockView implements NodeView { const attrs = this.node.attrs as JoplinEditableAttributes; const addEditButton = () => { - const editButton = document.createElement('button'); - editButton.classList.add('edit'); - const { localize: _ } = getEditorApi(this.view.state); - editButton.appendChild(createTextNode(_('Edit'))); - editButton.onclick = (event) => { - this.showEditDialog_(); - event.preventDefault(); - }; + const editButton = createButton(_('Edit'), () => this.showEditDialog_()); + editButton.classList.add('edit'); if (!attrs.readOnly) { this.dom.appendChild(editButton); diff --git a/packages/editor/ProseMirror/utils/dom/createButton.ts b/packages/editor/ProseMirror/utils/dom/createButton.ts new file mode 100644 index 0000000000..be3f9b6ae1 --- /dev/null +++ b/packages/editor/ProseMirror/utils/dom/createButton.ts @@ -0,0 +1,41 @@ +import { LocalizationResult } from '../../../types'; +import createTextNode from './createTextNode'; + +type OnClick = ()=> void; + +const createButton = (label: LocalizationResult, onClick: OnClick) => { + const button = document.createElement('button'); + button.appendChild(createTextNode(label)); + + // Works around an issue on iOS in which certain