2019-06-07 12:46:19 -04:00
|
|
|
import {debounce} from "../services/util";
|
2022-11-16 08:04:22 -05:00
|
|
|
import {Component} from "./component";
|
2022-11-26 11:43:28 -05:00
|
|
|
import {init as initEditor} from "../markdown/editor";
|
2018-01-20 15:40:21 -05:00
|
|
|
|
2022-11-16 08:04:22 -05:00
|
|
|
export class MarkdownEditor extends Component {
|
2017-09-23 07:24:06 -04:00
|
|
|
|
2020-07-05 16:18:17 -04:00
|
|
|
setup() {
|
|
|
|
this.elem = this.$el;
|
2019-03-08 16:32:31 -05:00
|
|
|
|
2020-07-05 16:18:17 -04:00
|
|
|
this.pageId = this.$opts.pageId;
|
|
|
|
this.textDirection = this.$opts.textDirection;
|
2020-11-21 12:52:49 -05:00
|
|
|
this.imageUploadErrorText = this.$opts.imageUploadErrorText;
|
2021-05-26 13:23:27 -04:00
|
|
|
this.serverUploadLimitText = this.$opts.serverUploadLimitText;
|
2019-03-08 16:32:31 -05:00
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
this.display = this.$refs.display;
|
|
|
|
this.input = this.$refs.input;
|
2022-11-28 09:08:20 -05:00
|
|
|
this.divider = this.$refs.divider;
|
|
|
|
this.displayWrap = this.$refs.displayWrap;
|
|
|
|
|
|
|
|
const settingContainer = this.$refs.settingContainer;
|
|
|
|
const settingInputs = settingContainer.querySelectorAll('input[type="checkbox"]');
|
2017-09-23 07:24:06 -04:00
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
this.editor = null;
|
|
|
|
initEditor({
|
|
|
|
pageId: this.pageId,
|
|
|
|
container: this.elem,
|
|
|
|
displayEl: this.display,
|
|
|
|
inputEl: this.input,
|
|
|
|
drawioUrl: this.getDrawioUrl(),
|
2022-11-28 09:08:20 -05:00
|
|
|
settingInputs: Array.from(settingInputs),
|
2022-11-26 11:43:28 -05:00
|
|
|
text: {
|
|
|
|
serverUploadLimit: this.serverUploadLimitText,
|
|
|
|
imageUploadError: this.imageUploadErrorText,
|
2022-11-28 07:12:36 -05:00
|
|
|
},
|
2022-11-26 11:43:28 -05:00
|
|
|
}).then(editor => {
|
|
|
|
this.editor = editor;
|
|
|
|
this.setupListeners();
|
|
|
|
this.emitEditorEvents();
|
|
|
|
this.scrollToTextIfNeeded();
|
|
|
|
this.editor.actions.updateAndRender();
|
2022-02-08 06:10:01 -05:00
|
|
|
});
|
2022-11-26 11:43:28 -05:00
|
|
|
}
|
2017-09-23 07:24:06 -04:00
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
emitEditorEvents() {
|
2020-07-05 16:18:17 -04:00
|
|
|
window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
|
2022-11-26 11:43:28 -05:00
|
|
|
markdownIt: this.editor.markdown.getRenderer(),
|
2019-10-16 13:01:35 -04:00
|
|
|
displayEl: this.display,
|
2022-11-26 11:43:28 -05:00
|
|
|
codeMirrorInstance: this.editor.cm,
|
2019-10-16 13:01:35 -04:00
|
|
|
});
|
2017-09-23 07:24:06 -04:00
|
|
|
}
|
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
setupListeners() {
|
2017-09-23 07:24:06 -04:00
|
|
|
|
|
|
|
// Button actions
|
|
|
|
this.elem.addEventListener('click', event => {
|
|
|
|
let button = event.target.closest('button[data-action]');
|
|
|
|
if (button === null) return;
|
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
const action = button.getAttribute('data-action');
|
|
|
|
if (action === 'insertImage') this.editor.actions.insertImage();
|
|
|
|
if (action === 'insertLink') this.editor.actions.showLinkSelector();
|
2019-04-20 08:12:35 -04:00
|
|
|
if (action === 'insertDrawing' && (event.ctrlKey || event.metaKey)) {
|
2022-11-26 11:43:28 -05:00
|
|
|
this.editor.actions.showImageManager();
|
2018-05-27 09:33:50 -04:00
|
|
|
return;
|
|
|
|
}
|
2022-11-26 11:43:28 -05:00
|
|
|
if (action === 'insertDrawing') this.editor.actions.startDrawing();
|
|
|
|
if (action === 'fullscreen') this.editor.actions.fullScreen();
|
2017-09-23 07:24:06 -04:00
|
|
|
});
|
|
|
|
|
2019-04-14 07:04:20 -04:00
|
|
|
// Mobile section toggling
|
|
|
|
this.elem.addEventListener('click', event => {
|
|
|
|
const toolbarLabel = event.target.closest('.editor-toolbar-label');
|
|
|
|
if (!toolbarLabel) return;
|
|
|
|
|
|
|
|
const currentActiveSections = this.elem.querySelectorAll('.markdown-editor-wrap');
|
2022-11-26 11:43:28 -05:00
|
|
|
for (const activeElem of currentActiveSections) {
|
2019-04-14 07:04:20 -04:00
|
|
|
activeElem.classList.remove('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
|
|
|
|
});
|
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
// Refresh CodeMirror on container resize
|
|
|
|
const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
|
|
|
|
const observer = new ResizeObserver(resizeDebounced);
|
|
|
|
observer.observe(this.elem);
|
2019-09-01 05:51:52 -04:00
|
|
|
|
2022-11-28 09:08:20 -05:00
|
|
|
this.handleDividerDrag();
|
|
|
|
}
|
2022-11-28 07:12:36 -05:00
|
|
|
|
2022-11-28 09:08:20 -05:00
|
|
|
handleDividerDrag() {
|
|
|
|
this.divider.addEventListener('pointerdown', event => {
|
|
|
|
const wrapRect = this.elem.getBoundingClientRect();
|
|
|
|
const moveListener = (event) => {
|
|
|
|
const xRel = event.pageX - wrapRect.left;
|
|
|
|
const xPct = Math.min(Math.max(20, Math.floor((xRel / wrapRect.width) * 100)), 80);
|
|
|
|
this.displayWrap.style.flexBasis = `${100-xPct}%`;
|
|
|
|
this.editor.settings.set('editorWidth', xPct);
|
|
|
|
};
|
|
|
|
const upListener = (event) => {
|
|
|
|
window.removeEventListener('pointermove', moveListener);
|
|
|
|
window.removeEventListener('pointerup', upListener);
|
|
|
|
this.display.style.pointerEvents = null;
|
|
|
|
document.body.style.userSelect = null;
|
|
|
|
this.editor.cm.refresh();
|
|
|
|
};
|
|
|
|
|
|
|
|
this.display.style.pointerEvents = 'none';
|
|
|
|
document.body.style.userSelect = 'none';
|
|
|
|
window.addEventListener('pointermove', moveListener);
|
|
|
|
window.addEventListener('pointerup', upListener);
|
|
|
|
});
|
|
|
|
const widthSetting = this.editor.settings.get('editorWidth');
|
|
|
|
if (widthSetting) {
|
|
|
|
this.displayWrap.style.flexBasis = `${100-widthSetting}%`;
|
2022-11-28 07:12:36 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
scrollToTextIfNeeded() {
|
2019-09-01 05:51:52 -04:00
|
|
|
const queryParams = (new URL(window.location)).searchParams;
|
|
|
|
const scrollText = queryParams.get('content-text');
|
|
|
|
if (scrollText) {
|
2022-11-26 11:43:28 -05:00
|
|
|
this.editor.actions.scrollToText(scrollText);
|
2017-09-23 07:24:06 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
/**
|
|
|
|
* Get the URL for the configured drawio instance.
|
|
|
|
* @returns {String}
|
|
|
|
*/
|
2020-04-05 12:27:16 -04:00
|
|
|
getDrawioUrl() {
|
2022-11-26 11:43:28 -05:00
|
|
|
const drawioAttrEl = document.querySelector('[drawio-url]');
|
|
|
|
if (!drawioAttrEl) {
|
|
|
|
return '';
|
2019-03-08 16:32:31 -05:00
|
|
|
}
|
|
|
|
|
2022-11-26 11:43:28 -05:00
|
|
|
return drawioAttrEl.getAttribute('drawio-url') || '';
|
2018-01-20 15:40:21 -05:00
|
|
|
}
|
|
|
|
|
2017-09-23 07:24:06 -04:00
|
|
|
}
|