summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
blob: 6436dcaae646b28e24ea5e863c0093f093950a74 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import Vue from 'vue';
import ToolbarItem from '../toolbar_item.vue';
import buildHtmlToMarkdownRenderer from './build_html_to_markdown_renderer';

const buildWrapper = propsData => {
  const instance = new Vue({
    render(createElement) {
      return createElement(ToolbarItem, propsData);
    },
  });

  instance.$mount();
  return instance.$el;
};

export const generateToolbarItem = config => {
  const { icon, classes, event, command, tooltip, isDivider } = config;

  if (isDivider) {
    return 'divider';
  }

  return {
    type: 'button',
    options: {
      el: buildWrapper({ props: { icon, tooltip }, class: classes }),
      event,
      command,
    },
  };
};

export const addCustomEventListener = (editorApi, event, handler) => {
  editorApi.eventManager.addEventType(event);
  editorApi.eventManager.listen(event, handler);
};

export const removeCustomEventListener = (editorApi, event, handler) =>
  editorApi.eventManager.removeEventHandler(event, handler);

export const addImage = ({ editor }, image) => editor.exec('AddImage', image);

export const getMarkdown = editorInstance => editorInstance.invoke('getMarkdown');

/**
 * This function allow us to extend Toast UI HTML to Markdown renderer. It is
 * a temporary measure because Toast UI does not provide an API
 * to achieve this goal.
 */
export const registerHTMLToMarkdownRenderer = editorApi => {
  const { renderer } = editorApi.toMarkOptions;

  Object.assign(editorApi.toMarkOptions, {
    renderer: renderer.constructor.factory(renderer, buildHtmlToMarkdownRenderer(renderer)),
  });
};