Source: editor-menu.js

  1. /* global $, libreviews, config */
  2. const {
  3.   wrapItem,
  4.   blockTypeItem,
  5.   Dropdown,
  6.   DropdownSubmenu,
  7.   joinUpItem,
  8.   liftItem,
  9.   undoItem,
  10.   redoItem,
  11.   icons,
  12.   MenuItem
  13. } = require("prosemirror-menu");
  15. const unescapeHTML = require('unescape-html');
  17. // Load proper translations for built-in items
  18. undoItem.spec.title = libreviews.msg('undo');
  19. redoItem.spec.title = libreviews.msg('redo');
  20. joinUpItem.spec.title = libreviews.msg('join with item above');
  21. liftItem.spec.title = libreviews.msg('decrease item indentation');
  23. const { NodeSelection, TextSelection } = require('prosemirror-state');
  24. const { toggleMark, wrapIn } = require('prosemirror-commands');
  25. const { wrapInList } = require('prosemirror-schema-list');
  26. const { TextField, openPrompt } = require('./editor-prompt');
  27. const { uploadModal } = require('./upload-modal');
  28. const { guessMediaType } = require('markdown-it-html5-media');
  30. // Helpers to create specific types of items
  32. function canInsert(state, nodeType, attrs) {
  33.   let $from = state.selection.$from;
  34.   for (let d = $from.depth; d >= 0; d--) {
  35.     let index = $from.index(d);
  36.     if ($from.node(d).canReplaceWith(index, index, nodeType, attrs))
  37.       return true;
  38.   }
  39.   return false;
  40. }
  42. function insertMediaItem(nodeTypes, schema) {
  43.   return new MenuItem({
  44.     title: libreviews.msg('insert media help'),
  45.     label: libreviews.msg('insert media'),
  46.     select(state) {
  47.       return canInsert(state, nodeTypes.image);
  48.     },
  49.     run(state, _dispatch, view) {
  50.       let { from, to } = state.selection,
  51.         attrs = null,
  52.         showCaptionField = true;
  54.       // Extract attributes from any media selection. We apply ALT text from
  55.       // images to video/audio descriptions and vice versa
  56.       if (state.selection instanceof NodeSelection) {
  57.         switch (state.selection.node.type.name) {
  58.           case 'image':
  59.             attrs = {
  60.               src: state.selection.node.attrs.src,
  61.               alt: state.selection.node.attrs.alt ||
  62.                 state.selection.node.attrs.description || null
  63.             };
  64.             break;
  65.           case 'video':
  66.           case 'audio':
  67.             attrs = {
  68.               src: state.selection.node.attrs.src,
  69.               description: state.selection.node.attrs.description ||
  70.                 state.selection.node.attrs.alt || null
  71.             };
  72.             break;
  73.           default:
  74.             // No default
  75.         }
  76.         showCaptionField = false;
  77.       }
  78.       const fields = {};
  80.       fields.src = new TextField({ label: libreviews.msg('media url'), required: true, value: attrs && attrs.src });
  82.       if (showCaptionField)
  83.         fields.caption = new TextField({
  84.           label: libreviews.msg('caption label'),
  85.         });
  87.       fields.alt = new TextField({
  88.         label: libreviews.msg('media alt text'),
  89.         value: attrs ? attrs.alt || attrs.description : state.doc.textBetween(from, to, " ")
  90.       });
  92.       openPrompt({
  93.         view,
  94.         fields,
  95.         title: libreviews.msg('insert media dialog title'),
  96.         callback(attrs) {
  97.           const nodeType = guessMediaType(attrs.src);
  98.           // <video>/<audio> tags do not support ALT; the text is rendered
  99.           // as inner HTML alongside the fallback message.
  100.           if (['video', 'audio'].includes(nodeType)) {
  101.             attrs.description = attrs.alt;
  102.             Reflect.deleteProperty(attrs, 'alt');
  103.           }
  104.           let tr = view.state.tr.replaceSelectionWith(nodeTypes[nodeType].createAndFill(attrs));
  105.           if (attrs.caption && attrs.caption.length)
  106.             tr = addCaption({ description: attrs.caption + '\n', schema, state: view.state, transaction: tr });
  107.           view.dispatch(tr);
  108.           view.focus();
  109.         }
  110.       });
  111.     }
  112.   });
  113. }
  115. function addCaption({ description, schema, state, transaction }) {
  116.   const br = schema.nodes.hard_break.create(),
  117.     descriptionNode = schema.text(description,
  118.     schema.marks.strong.create()),
  119.     pos = state.selection.$anchor.pos;
  120.   return transaction
  121.   .insert(pos + 1, br)
  122.   .insert(pos + 2, descriptionNode);
  123. }
  125. function horizontalRuleItem(hr) {
  127.   return new MenuItem({
  128.     title: libreviews.msg('insert horizontal rule help', { accessKey: '_' }),
  129.     label: libreviews.msg('insert horizontal rule'),
  130.     select(state) {
  131.       return canInsert(state, hr);
  132.     },
  133.     run(state, dispatch) {
  134.       dispatch(state.tr.replaceSelectionWith(hr.create()));
  135.     }
  136.   });
  137. }
  140. function cmdItem(cmd, options) {
  141.   let passedOptions = {
  142.     label: options.title,
  143.     run: cmd,
  144.     select(state) {
  145.       return cmd(state);
  146.     }
  147.   };
  148.   for (let prop in options)
  149.     passedOptions[prop] = options[prop];
  150.   return new MenuItem(passedOptions);
  151. }
  153. function markActive(state, type) {
  154.   let { from, $from, to, empty } = state.selection;
  155.   if (empty)
  156.     return type.isInSet(state.storedMarks || $from.marks());
  157.   else
  158.     return state.doc.rangeHasMark(from, to, type);
  159. }
  161. function markItem(markType, options) {
  162.   let passedOptions = {
  163.     active(state) {
  164.       return markActive(state, markType);
  165.     }
  166.   };
  167.   for (let prop in options)
  168.     passedOptions[prop] = options[prop];
  169.   return cmdItem(toggleMark(markType), passedOptions);
  170. }
  172. function fullScreenItem() {
  173.   return new MenuItem({
  174.     title: libreviews.msg('full screen mode', { accessKey: 'u' }),
  175.     icon: { dom: $('<span class="fa fa-arrows-alt baselined-icon"></span>')[0] },
  176.     active() {
  177.       return this.enabled || false;
  178.     },
  179.     run(state, _dispatch, view) {
  180.       let $rteContainer = $(view.dom).closest('.rte-container');
  181.       let id = Number($rteContainer[0].id.match(/\d+/)[0]);
  182.       if (!this.enabled) {
  183.         libreviews.activeRTEs[id].enterFullScreen();
  184.         this.enabled = true;
  185.       } else {
  186.         libreviews.activeRTEs[id].exitFullScreen();
  187.         this.enabled = false;
  188.       }
  189.       view.updateState(state);
  190.     }
  191.   });
  192. }
  194. function uploadModalItem(mediaNodes, schema) {
  195.   return new MenuItem({
  196.     title: libreviews.msg('upload and insert media'),
  197.     icon: { dom: $('<span class="fa fa-cloud-upload baselined-icon"><span>')[0] },
  198.     active() {
  199.       return false;
  200.     },
  201.     run(state, dispatch, view) {
  202.       // For some forms, we submit uploaded file IDs so they can be processed
  203.       // server-side
  204.       const $form = $(view.dom).closest('form[data-submit-uploaded-files]');
  205.       uploadModal(uploads => {
  206.         const upload = uploads[0];
  207.         const attrs = {
  208.           src: `/static/uploads/${encodeURIComponent(upload.uploadedFileName)}`
  209.         };
  210.         const nodeType = guessMediaType(attrs.src);
  211.         const description = generateDescriptionFromUpload(upload);
  212.         let tr = state.tr
  213.           .replaceSelectionWith(mediaNodes[nodeType].createAndFill(attrs));
  214.         tr = addCaption({ description, schema, state, transaction: tr });
  215.         dispatch(tr);
  217.         if ($form.length) {
  218.           $form.append(`<input type="hidden" ` +
  219.             ` name="uploaded-file-${upload.fileID}" value="1">`);
  220.           if ($form.find('#social-media-image-select').length) {
  221.             let summarizedDesc = upload.description[config.language].substr(0, 80);
  222.             if (upload.description[config.language].length > 80)
  223.               summarizedDesc += '...';
  224.             $('#social-media-image-select').append(`<option value="${upload.fileID}">` +
  225.             `${upload.uploadedFileName}: ${summarizedDesc}` +
  226.             `</option>`);
  227.           }
  228.         }
  229.         view.focus();
  230.       });
  231.     }
  232.   });
  233. }
  235. function generateDescriptionFromUpload(upload) {
  236.   // API returns escaped HTML; editor will re-escape it
  237.   const description = unescapeHTML(upload.description[config.language]);
  238.   const creator = upload.creator && upload.creator[config.language];
  239.   let license;
  240.   switch (upload.license) {
  241.     case 'fair-use':
  242.       license = libreviews.msg('fair use in caption');
  243.       break;
  244.     case 'cc-0':
  245.       license = libreviews.msg('public domain in caption');
  246.       break;
  247.     default:
  248.       license = libreviews.msg('license in caption', {
  249.         stringParam: libreviews.msg(`${upload.license} short`)
  250.       });
  251.   }
  253.   let rights;
  254.   if (!creator) // Own work
  255.     rights = libreviews.msg('rights in caption, own work', { stringParam: license });
  256.   else
  257.     rights = libreviews.msg('rights in caption, someone else\'s work', {
  258.       stringParams: [creator, license]
  259.     });
  260.   const caption = libreviews.msg('caption', { stringParams: [description, rights] });
  261.   // Final newline is important to ensure resulting markdown is parsed correctly
  262.   return caption + '\n';
  263. }
  265. function formatCustomWarningItem(nodeType) {
  266.   return new MenuItem({
  267.     title: libreviews.msg('format as custom warning help'),
  268.     label: libreviews.msg('format as custom warning'),
  269.     run(state, dispatch, view) {
  270.       let prompt = {
  271.         view,
  272.         title: libreviews.msg('format as custom warning dialog title'),
  273.         fields: {
  274.           message: new TextField({
  275.             label: libreviews.msg('custom warning text'),
  276.             required: true
  277.           })
  278.         },
  279.         callback(attrs) {
  280.           // Used to translate node back into markdown
  281.           attrs.markup = `warning ${attrs.message}`;
  282.           wrapIn(nodeType, attrs)(state, dispatch);
  283.           view.focus();
  284.         }
  285.       };
  286.       openPrompt(prompt);
  287.     },
  288.     select(state) {
  289.       return wrapIn(nodeType)(state);
  290.     }
  291.   });
  292. }
  294. function linkItem(schema) {
  295.   return new MenuItem({
  296.     title: libreviews.msg('add or remove link', { accessKey: 'k' }),
  297.     icon: icons.link,
  298.     active(state) {
  299.       return markActive(state, schema.marks.link);
  300.     },
  301.     run(state, dispatch, view) {
  302.       if (markActive(state, schema.marks.link)) {
  303.         toggleMark(schema.marks.link)(state, dispatch);
  304.         return true;
  305.       }
  306.       const required = true;
  307.       const fields = {
  308.         href: new TextField({
  309.           label: libreviews.msg('web address'),
  310.           required,
  311.           clean: val => !/^https?:\/\//i.test(val) ? 'http://' + val : val
  312.         })
  313.       };
  314.       // User has not selected any text, so needs to provide it via dialog
  315.       if (view.state.selection.empty)
  316.         fields.linkText = new TextField({
  317.           label: libreviews.msg('link text'),
  318.           required,
  319.           clean: val => val.trim()
  320.         });
  321.       openPrompt({
  322.         view,
  323.         title: libreviews.msg('add link dialog title'),
  324.         fields,
  325.         callback(attrs) {
  326.           if (!attrs.linkText) {
  327.             // Transform selected text into link
  328.             toggleMark(schema.marks.link, attrs)(view.state, view.dispatch);
  329.             // Advance cursor to end of selection (not necessarily head,
  330.             // depending on selection direction)
  331.             let rightmost = view.state.selection.$anchor.pos > view.state.selection.$head.pos ?
  332.               view.state.selection.$anchor : view.state.selection.$head;
  333.             view.dispatch(view.state.tr.setSelection(TextSelection.between(rightmost, rightmost)));
  334.             // Disable link mark so user can now type normally again
  335.             toggleMark(schema.marks.link, attrs)(view.state, view.dispatch);
  336.           } else {
  337.             view.dispatch(
  338.               view.state.tr
  339.               .replaceSelectionWith(schema.text(attrs.linkText))
  340.               .addMark(view.state.selection.$from.pos,
  341.                 view.state.selection.$from.pos + attrs.linkText.length,
  342.                 schema.marks.link.create({ href: attrs.href }))
  343.             );
  344.           }
  345.           view.focus();
  346.         }
  347.       });
  348.     }
  349.   });
  350. }
  352. function wrapListItem(nodeType, options) {
  353.   return cmdItem(wrapInList(nodeType, options.attrs), options);
  354. }
  356. function headingItems(nodeType) {
  357.   const headingItems = [];
  358.   for (let i = 1; i <= 6; i++)
  359.     headingItems[i - 1] = blockTypeItem(nodeType, {
  360.       title: libreviews.msg('format as level heading help', { accessKey: String(i), numberParam: i }),
  361.       label: libreviews.msg('format as level heading', { numberParam: i }),
  362.       attrs: { level: i }
  363.     });
  364.   return headingItems;
  365. }
  367. /**
  368.  * Build a menu for nodes and marks supported in the markdown schema.
  369.  *
  370.  * @param {Schema} schema
  371.  *  the markdown schema
  372.  * @returns {Object}
  373.  *  the generated menu and all its items
  374.  */
  375. function buildMenuItems(schema) {
  376.   const mediaNodes = {
  377.     image: schema.nodes.image,
  378.     video: schema.nodes.video,
  379.     audio: schema.nodes.audio
  380.   };
  382.   const items = {
  383.     toggleStrong: markItem(schema.marks.strong, { title: libreviews.msg('toggle bold', { accessKey: 'b' }), icon: icons.strong }),
  384.     toggleEm: markItem(schema.marks.em, { title: libreviews.msg('toggle italic', { accessKey: 'i' }), icon: icons.em }),
  385.     toggleCode: markItem(schema.marks.code, { title: libreviews.msg('toggle code', { accessKey: '`' }), icon: icons.code }),
  386.     toggleLink: linkItem(schema),
  387.     insertMedia: insertMediaItem(mediaNodes, schema),
  388.     insertHorizontalRule: horizontalRuleItem(schema.nodes.horizontal_rule),
  389.     wrapBulletList: wrapListItem(schema.nodes.bullet_list, {
  390.       title: libreviews.msg('format as bullet list', { accessKey: '8' }),
  391.       icon: icons.bulletList
  392.     }),
  393.     wrapOrderedList: wrapListItem(schema.nodes.ordered_list, {
  394.       title: libreviews.msg('format as numbered list', { accessKey: '9' }),
  395.       icon: icons.orderedList
  396.     }),
  397.     wrapBlockQuote: wrapItem(schema.nodes.blockquote, {
  398.       title: libreviews.msg('format as quote', { accessKey: '>' }),
  399.       icon: icons.blockquote
  400.     }),
  401.     makeParagraph: blockTypeItem(schema.nodes.paragraph, {
  402.       title: libreviews.msg('format as paragraph help', { accessKey: '0' }),
  403.       label: libreviews.msg('format as paragraph')
  404.     }),
  405.     makeCodeBlock: blockTypeItem(schema.nodes.code_block, {
  406.       title: libreviews.msg('format as code block help'),
  407.       label: libreviews.msg('format as code block')
  408.     }),
  409.     formatSpoilerWarning: wrapItem(schema.nodes.container_warning, {
  410.       title: libreviews.msg('format as spoiler help'),
  411.       label: libreviews.msg('format as spoiler'),
  412.       attrs: { markup: 'spoiler', message: libreviews.msg('spoiler warning') }
  413.     }),
  414.     formatNSFWWarning: wrapItem(schema.nodes.container_warning, {
  415.       title: libreviews.msg('format as nsfw help'),
  416.       label: libreviews.msg('format as nsfw'),
  417.       attrs: { markup: 'nsfw', message: libreviews.msg('nsfw warning') }
  418.     }),
  419.     formatCustomWarning: formatCustomWarningItem(schema.nodes.container_warning),
  420.     makeHeading: headingItems(schema.nodes.heading),
  421.     fullScreen: fullScreenItem(),
  422.     undo: undoItem,
  423.     redo: redoItem,
  424.     joinUp: joinUpItem,
  425.     lift: liftItem
  426.   };
  428.   // Only trusted users can upload files directly from within the RTE.
  429.   if (config.isTrusted)
  430.     items.upload = uploadModalItem(mediaNodes, schema);
  432.   const insertDropdown = new Dropdown([items.insertMedia, items.insertHorizontalRule], {
  433.     label: libreviews.msg('insert'),
  434.     title: libreviews.msg('insert help')
  435.   });
  437.   const headingSubmenu = new DropdownSubmenu([...items.makeHeading], { label: libreviews.msg('format as heading') });
  439.   const typeDropdown = new Dropdown(
  440.     [
  441.       items.makeParagraph, items.makeCodeBlock, items.formatSpoilerWarning,
  442.       items.formatNSFWWarning, items.formatCustomWarning, headingSubmenu
  443.     ], {
  444.       label: libreviews.msg('format block'),
  445.       title: libreviews.msg('format block help')
  446.     });
  448.   // Create final menu structure. In the rendered menu, there is a separator
  449.   // symbol between each array
  451.   const mediaOptions = [insertDropdown];
  453.   // Only trusted users can upload files directly via the RTE.
  454.   if (config.isTrusted)
  455.     mediaOptions.push(items.upload);
  457.   const menu = [
  458.     [items.toggleStrong, items.toggleEm, items.toggleCode, items.toggleLink],
  459.     mediaOptions,
  460.     [typeDropdown, items.wrapBulletList, items.wrapOrderedList, items.wrapBlockQuote, items.joinUp, items.lift],
  461.     [items.undo, items.redo],
  462.     [items.fullScreen]
  463.   ];
  465.   // We expose the items object so it can be used to externally trigger a menu
  466.   // function, e.g., via a keyboard shortcut
  467.   return { menu, items };
  468. }
  470. exports.buildMenuItems = buildMenuItems;