From bacab4d6a44033b44b01856f11f2ee14c2356284 Mon Sep 17 00:00:00 2001 From: Nithin David <1277421+nithindavid@users.noreply.github.com> Date: Wed, 21 Dec 2022 20:00:29 +0530 Subject: [PATCH] Makes editor work --- .../widgets/WootWriter/FullEditor.vue | 202 ++++++++++++++ .../widgets/WootWriter/src/blockInputRules.js | 176 +++++++++++++ .../widgets/WootWriter/src/commands.js | 157 +++++++++++ .../widgets/WootWriter/src/icons.js | 75 ++++++ .../widgets/WootWriter/src/marksInputRules.js | 248 ++++++++++++++++++ .../components/widgets/WootWriter/src/menu.js | 227 ++++++++++++++++ .../widgets/WootWriter/src/utils.js | 225 ++++++++++++++++ .../helpcenter/components/ArticleEditor.vue | 5 +- package.json | 3 + yarn.lock | 71 +++++ 10 files changed, 1386 insertions(+), 3 deletions(-) create mode 100644 app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue create mode 100644 app/javascript/dashboard/components/widgets/WootWriter/src/blockInputRules.js create mode 100644 app/javascript/dashboard/components/widgets/WootWriter/src/commands.js create mode 100644 app/javascript/dashboard/components/widgets/WootWriter/src/icons.js create mode 100644 app/javascript/dashboard/components/widgets/WootWriter/src/marksInputRules.js create mode 100644 app/javascript/dashboard/components/widgets/WootWriter/src/menu.js create mode 100644 app/javascript/dashboard/components/widgets/WootWriter/src/utils.js diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue new file mode 100644 index 000000000..291dd3c5a --- /dev/null +++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue @@ -0,0 +1,202 @@ + + + + + diff --git a/app/javascript/dashboard/components/widgets/WootWriter/src/blockInputRules.js b/app/javascript/dashboard/components/widgets/WootWriter/src/blockInputRules.js new file mode 100644 index 000000000..df2992a83 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/WootWriter/src/blockInputRules.js @@ -0,0 +1,176 @@ +import { + textblockTypeInputRule, + wrappingInputRule, + inputRules, +} from 'prosemirror-inputrules'; + +import { leafNodeReplacementCharacter } from './utils'; +import { createInputRule, defaultInputRuleHandler } from './utils'; +import { + isConvertableToCodeBlock, + transformToCodeBlockAction, + insertBlock, +} from './commands'; +import { safeInsert } from 'prosemirror-utils'; + +const MAX_HEADING_LEVEL = 5; + +function getHeadingLevel(match) { + return { + level: match[1].length, + }; +} + +export function headingRule(nodeType, maxLevel) { + return textblockTypeInputRule( + new RegExp('^(#{1,' + maxLevel + '})\\s$'), + nodeType, + getHeadingLevel + ); +} + +export function blockQuoteRule(nodeType) { + return wrappingInputRule(/^\s*>\s$/, nodeType); +} + +export function codeBlockRule(nodeType) { + return textblockTypeInputRule(/^```$/, nodeType); +} + +/** + * Get heading rules + * + * @param {Schema} schema + * @returns {} + */ +function getHeadingRules(schema) { + // '# ' for h1, '## ' for h2 and etc + const hashRule = defaultInputRuleHandler( + headingRule(schema.nodes.heading, MAX_HEADING_LEVEL), + true + ); + + const leftNodeReplacementHashRule = createInputRule( + new RegExp(`${leafNodeReplacementCharacter}(#{1,6})\\s$`), + (state, match, start, end) => { + const level = match[1].length; + return insertBlock( + state, + schema.nodes.heading, + `heading${level}`, + start, + end, + { level } + ); + }, + true + ); + + return [hashRule, leftNodeReplacementHashRule]; +} + +/** + * Get all block quote input rules + * + * @param {Schema} schema + * @returns {} + */ +function getBlockQuoteRules(schema) { + // '> ' for blockquote + const greatherThanRule = defaultInputRuleHandler( + blockQuoteRule(schema.nodes.blockquote), + true + ); + + const leftNodeReplacementGreatherRule = createInputRule( + new RegExp(`${leafNodeReplacementCharacter}\\s*>\\s$`), + (state, _match, start, end) => { + return insertBlock( + state, + schema.nodes.blockquote, + 'blockquote', + start, + end + ); + }, + true + ); + + return [greatherThanRule, leftNodeReplacementGreatherRule]; +} + +/** + * Get all code block input rules + * + * @param {Schema} schema + * @returns {} + */ +function getCodeBlockRules(schema) { + const threeTildeRule = createInputRule( + /((^`{3,})|(\s`{3,}))(\S*)$/, + (state, match, start, end) => { + const attributes = {}; + if (match[4]) { + attributes.language = match[4]; + } + const newStart = match[0][0] === ' ' ? start + 1 : start; + if (isConvertableToCodeBlock(state)) { + const tr = transformToCodeBlockAction(state, attributes) + // remove markdown decorator ``` + .delete(newStart, end) + .scrollIntoView(); + return tr; + } + let { tr } = state; + tr = tr.delete(newStart, end); + const codeBlock = state.schema.nodes.code_block.createChecked(); + return safeInsert(codeBlock)(tr); + }, + true + ); + + const leftNodeReplacementThreeTildeRule = createInputRule( + new RegExp(`((${leafNodeReplacementCharacter}\`{3,})|(\\s\`{3,}))(\\S*)$`), + (state, match, start, end) => { + const attributes = {}; + if (match[4]) { + attributes.language = match[4]; + } + let tr = insertBlock( + state, + schema.nodes.code_block, + 'codeblock', + start, + end, + attributes + ); + return tr; + }, + true + ); + + return [threeTildeRule, leftNodeReplacementThreeTildeRule]; +} + +export function blocksInputRule(schema) { + const rules = []; + + if (schema.nodes.heading) { + rules.push(...getHeadingRules(schema)); + } + + if (schema.nodes.blockquote) { + rules.push(...getBlockQuoteRules(schema)); + } + + if (schema.nodes.code_block) { + rules.push(...getCodeBlockRules(schema)); + } + + if (rules.length !== 0) { + return inputRules({ rules }); + } + return false; +} + +export default blocksInputRule; diff --git a/app/javascript/dashboard/components/widgets/WootWriter/src/commands.js b/app/javascript/dashboard/components/widgets/WootWriter/src/commands.js new file mode 100644 index 000000000..2dd137343 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/WootWriter/src/commands.js @@ -0,0 +1,157 @@ +import { hasParentNodeOfType } from 'prosemirror-utils'; +import { TextSelection, NodeSelection } from 'prosemirror-state'; +import { mapSlice } from './utils'; + +export const applyMarkOnRange = (from, to, removeMark, mark, tr) => { + // const { schema } = tr.doc.type; + // const { code } = schema.marks; + // if (mark.type === code) { + // // When turning to code we need to flat some special characters + // import { transformSmartCharsMentionsAndEmojis } from '../plugins/text-formatting/commands/transform-to-code'; + // transformSmartCharsMentionsAndEmojis(from, to, tr); + // } + + tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), (node, pos) => { + if (!node.isText) { + return true; + } + + // This is an issue when the user selects some text. + // We need to check if the current node position is less than the range selection from. + // If it’s true, that means we should apply the mark using the range selection, + // not the current node position. + const nodeBetweenFrom = Math.max(pos, tr.mapping.map(from)); + const nodeBetweenTo = Math.min(pos + node.nodeSize, tr.mapping.map(to)); + + if (removeMark) { + tr.removeMark(nodeBetweenFrom, nodeBetweenTo, mark); + } else { + tr.addMark(nodeBetweenFrom, nodeBetweenTo, mark); + } + + return true; + }); + + return tr; +}; + +export const insertBlock = (state, nodeType, nodeName, start, end, attrs) => { + // To ensure that match is done after HardBreak. + const { hardBreak, codeBlock, listItem } = state.schema.nodes; + const $pos = state.doc.resolve(start); + if ($pos.nodeAfter.type !== hardBreak) { + return null; + } + + // To ensure no nesting is done. (unless we're inserting a codeBlock inside lists) + if ( + $pos.depth > 1 && + !(nodeType === codeBlock && hasParentNodeOfType(listItem)(state.selection)) + ) { + return null; + } + + // Split at the start of autoformatting and delete formatting characters. + let tr = state.tr.delete(start, end).split(start); + let currentNode = tr.doc.nodeAt(start + 1); + + // If node has more content split at the end of autoformatting. + let nodeHasMoreContent = false; + tr.doc.nodesBetween(start, start + currentNode.nodeSize, (node, pos) => { + if (!nodeHasMoreContent && node.type === hardBreak) { + nodeHasMoreContent = true; + tr = tr.split(pos + 1).delete(pos, pos + 1); + } + }); + if (nodeHasMoreContent) { + currentNode = tr.doc.nodeAt(start + 1); + } + + // Create new node and fill with content of current node. + const { blockquote, paragraph } = state.schema.nodes; + let content; + let depth; + if (nodeType === blockquote) { + depth = 3; + content = [paragraph.create({}, currentNode.content)]; + } else { + depth = 2; + content = currentNode.content; + } + const newNode = nodeType.create(attrs, content); + + // Add new node. + tr = tr + .setSelection(new NodeSelection(tr.doc.resolve(start + 1))) + .replaceSelectionWith(newNode) + .setSelection(new TextSelection(tr.doc.resolve(start + depth))); + return tr; +}; + +export function transformToCodeBlockAction(state, attrs) { + if (!state.selection.empty) { + // Don't do anything, if there is something selected + return state.tr; + } + + const codeBlock = state.schema.nodes.code_block; + const startOfCodeBlockText = state.selection.$from; + const parentPos = startOfCodeBlockText.before(); + const end = startOfCodeBlockText.end(); + + const codeBlockSlice = mapSlice( + state.doc.slice(startOfCodeBlockText.pos, end), + node => { + if (node.type === state.schema.nodes.hard_break) { + return state.schema.text('\n'); + } + + if (node.isText) { + return node.mark([]); + } + if (node.isInline) { + return node.attrs.text ? state.schema.text(node.attrs.text) : null; + } + return node.content.childCount ? node.content : null; + } + ); + + const tr = state.tr.replaceRange( + startOfCodeBlockText.pos, + end, + codeBlockSlice + ); + // If our offset isnt at 3 (backticks) at the start of line, cater for content. + if (startOfCodeBlockText.parentOffset >= 3) { + return tr.split(startOfCodeBlockText.pos, undefined, [ + { type: codeBlock, attrs }, + ]); + } + // TODO: Check parent node for valid code block marks, ATM It's not necessary because code block doesn't have any valid mark. + const codeBlockMarks = []; + return tr.setNodeMarkup(parentPos, codeBlock, attrs, codeBlockMarks); +} + +export function isConvertableToCodeBlock(state) { + // Before a document is loaded, there is no selection. + if (!state.selection) { + return false; + } + + const { $from } = state.selection; + const node = $from.parent; + + if (!node.isTextblock || node.type === state.schema.nodes.code_block) { + return false; + } + + const parentDepth = $from.depth - 1; + const parentNode = $from.node(parentDepth); + const index = $from.index(parentDepth); + + return parentNode.canReplaceWith( + index, + index + 1, + state.schema.nodes.code_block + ); +} diff --git a/app/javascript/dashboard/components/widgets/WootWriter/src/icons.js b/app/javascript/dashboard/components/widgets/WootWriter/src/icons.js new file mode 100644 index 000000000..4d4e196ff --- /dev/null +++ b/app/javascript/dashboard/components/widgets/WootWriter/src/icons.js @@ -0,0 +1,75 @@ +const BaseIcon = { + width: 24, + height: 24, + viewBox: '0 0 24 24', + fill: 'none', + stroke: 'currentColor', + strokeWidth: 2, + strokeLinecap: 'round', + strokeLinejoin: 'round', + path: '', +}; +export const BoldIcon = { + ...BaseIcon, + path: + 'M6.935 4.44A1.5 1.5 0 0 1 7.996 4h4.383C15.017 4 17 6.182 17 8.625a4.63 4.63 0 0 1-.865 2.682c1.077.827 1.866 2.12 1.866 3.813C18 18.232 15.3 20 13.12 20H8a1.5 1.5 0 0 1-1.5-1.5l-.004-13c0-.397.158-.779.44-1.06ZM9.5 10.25h2.88c.903 0 1.62-.76 1.62-1.625S13.281 7 12.38 7H9.498l.002 3.25Zm0 3V17h3.62c.874 0 1.88-.754 1.88-1.88 0-1.13-.974-1.87-1.88-1.87H9.5Z', +}; + +export const ItalicsIcon = { + ...BaseIcon, + path: + 'M9.75 4h8.504a.75.75 0 0 1 .102 1.493l-.102.006h-3.197L10.037 18.5h4.213a.75.75 0 0 1 .742.648l.007.102a.75.75 0 0 1-.648.743L14.25 20h-9.5a.747.747 0 0 1-.746-.75c0-.38.28-.694.645-.743l.101-.007h3.685l.021-.065L13.45 5.499h-3.7a.75.75 0 0 1-.742-.648L9 4.75a.75.75 0 0 1 .648-.743L9.751 4h8.503-8.503Z', +}; + +export const CodeIcon = { + ...BaseIcon, + path: + 'm8.066 18.943 6.5-14.5a.75.75 0 0 1 1.404.518l-.036.096-6.5 14.5a.75.75 0 0 1-1.404-.518l.036-.096 6.5-14.5-6.5 14.5ZM2.22 11.47l4.25-4.25a.75.75 0 0 1 1.133.976l-.073.085L3.81 12l3.72 3.719a.75.75 0 0 1-.976 1.133l-.084-.073-4.25-4.25a.75.75 0 0 1-.073-.976l.073-.084 4.25-4.25-4.25 4.25Zm14.25-4.25a.75.75 0 0 1 .976-.073l.084.073 4.25 4.25a.75.75 0 0 1 .073.976l-.073.085-4.25 4.25a.75.75 0 0 1-1.133-.977l.073-.084L20.19 12l-3.72-3.72a.75.75 0 0 1 0-1.06Z', +}; + +export const LinkIcon = { + ...BaseIcon, + path: + 'M9.25 7a.75.75 0 0 1 .11 1.492l-.11.008H7a3.5 3.5 0 0 0-.206 6.994L7 15.5h2.25a.75.75 0 0 1 .11 1.492L9.25 17H7a5 5 0 0 1-.25-9.994L7 7h2.25ZM17 7a5 5 0 0 1 .25 9.994L17 17h-2.25a.75.75 0 0 1-.11-1.492l.11-.008H17a3.5 3.5 0 0 0 .206-6.994L17 8.5h-2.25a.75.75 0 0 1-.11-1.492L14.75 7H17ZM7 11.25h10a.75.75 0 0 1 .102 1.493L17 12.75H7a.75.75 0 0 1-.102-1.493L7 11.25h10H7Z', +}; + +export const UndoIcon = { + ...BaseIcon, + path: + 'M4.75 2a.75.75 0 0 1 .743.648l.007.102v5.69l4.574-4.56a6.41 6.41 0 0 1 8.879-.179l.186.18a6.41 6.41 0 0 1 0 9.063l-8.846 8.84a.75.75 0 0 1-1.06-1.062l8.845-8.838a4.91 4.91 0 0 0-6.766-7.112l-.178.17L6.562 9.5h5.688a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.648.743L12.25 11h-7.5a.75.75 0 0 1-.743-.648L4 10.25v-7.5A.75.75 0 0 1 4.75 2Z', +}; + +export const RedoIcon = { + ...BaseIcon, + path: + 'M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z', +}; +export const BulletListIcon = { + ...BaseIcon, + path: + 'M3.25 17.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm3.5.5h14.5a.75.75 0 0 1 .102 1.494l-.102.006H6.75a.75.75 0 0 1-.102-1.493L6.75 18h14.5-14.5Zm-3.5-7a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm3.5.5h14.5a.75.75 0 0 1 .102 1.494L21.25 13H6.75a.75.75 0 0 1-.102-1.493l.102-.007h14.5-14.5Zm-3.5-7A1.25 1.25 0 1 1 3.25 7a1.25 1.25 0 0 1 0-2.499Zm3.5.5h14.5a.75.75 0 0 1 .102 1.494l-.102.006H6.75a.75.75 0 0 1-.102-1.493L6.75 5h14.5-14.5Z', +}; + +export const TextNumberListIcon = { + ...BaseIcon, + path: + 'M6 2.75a.75.75 0 0 0-1.434-.307l-.002.003a1.45 1.45 0 0 1-.067.132 4.126 4.126 0 0 1-.238.384c-.217.313-.524.663-.906.902a.75.75 0 1 0 .794 1.272c.125-.078.243-.161.353-.248V7.25a.75.75 0 0 0 1.5 0v-4.5ZM20.5 18.75a.75.75 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 .75-.75ZM20.5 12.244a.75.75 0 0 0-.75-.75h-9a.75.75 0 1 0 0 1.5h9a.75.75 0 0 0 .75-.75ZM20.5 5.75a.75.75 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 .75-.75ZM5.15 10.52c-.3-.053-.676.066-.87.26a.75.75 0 1 1-1.06-1.06c.556-.556 1.43-.812 2.192-.677.397.07.805.254 1.115.605.316.358.473.825.473 1.352 0 .62-.271 1.08-.606 1.42-.278.283-.63.511-.906.689l-.08.051a5.88 5.88 0 0 0-.481.34H6.25a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75c0-1.314.984-1.953 1.575-2.337l.06-.04c.318-.205.533-.345.69-.504.134-.136.175-.238.175-.369 0-.223-.061-.318-.098-.36a.42.42 0 0 0-.251-.12ZM2.97 21.28s.093.084.004.005l.006.005.013.013a1.426 1.426 0 0 0 .15.125c.095.07.227.158.397.243.341.17.83.329 1.46.329.64 0 1.196-.181 1.601-.54.408-.36.61-.857.595-1.359A1.775 1.775 0 0 0 6.77 19c.259-.305.412-.685.426-1.101a1.73 1.73 0 0 0-.595-1.36C6.196 16.181 5.64 16 5 16c-.63 0-1.119.158-1.46.33a2.592 2.592 0 0 0-.51.334 1.426 1.426 0 0 0-.037.033l-.013.013-.006.005-.002.003H2.97l-.001.002a.75.75 0 0 0 1.048 1.072 1.1 1.1 0 0 1 .192-.121c.159-.08.42-.171.79-.171.36 0 .536.1.608.164.07.061.09.127.088.187a.325.325 0 0 1-.123.23c-.089.077-.263.169-.573.169a.75.75 0 0 0 0 1.5c.31 0 .484.092.573.168.091.08.121.166.123.231a.232.232 0 0 1-.088.187c-.072.064-.247.164-.608.164a1.75 1.75 0 0 1-.79-.17 1.1 1.1 0 0 1-.192-.122.75.75 0 0 0-1.048 1.072Zm.002-4.563-.001.002c.007-.006.2-.168 0-.002Z', +}; + +export const Heading1Icon = { + ...BaseIcon, + path: + 'M19.59 5.081a.746.746 0 0 0-.809.084.751.751 0 0 0-.249.367c-.69 2.051-2.057 3.409-3.168 4.075a.75.75 0 0 0 .772 1.286c.774-.464 1.623-1.18 2.364-2.146v9.503a.75.75 0 0 0 1.5 0V5.772a.75.75 0 0 0-.41-.69ZM3.5 5.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V12.5H10v5.75a.75.75 0 0 0 1.5 0V5.75a.75.75 0 0 0-1.5 0V11H3.5V5.75Z', +}; + +export const Heading2Icon = { + ...BaseIcon, + path: + 'M4.5 5.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V12.5H11v5.75a.75.75 0 0 0 1.5 0V5.75a.75.75 0 0 0-1.5 0V11H4.5V5.75Zm10.921 2.085c.23-.46.913-1.335 2.58-1.335.842 0 1.459.26 1.86.639.397.376.64.921.64 1.611 0 1.963-1.3 3.068-2.958 4.343l-.212.163C15.825 14.409 14 15.806 14 18.25a.75.75 0 0 0 .75.75h6.5a.75.75 0 0 0 0-1.5h-5.66c.315-1.252 1.427-2.11 2.866-3.218C20.05 13.057 22 11.537 22 8.75c0-1.06-.383-2.015-1.11-2.702C20.166 5.364 19.158 5 18 5c-2.333 0-3.484 1.291-3.92 2.165a.75.75 0 0 0 1.341.67Z', +}; + +export const Heading3Icon = { + ...BaseIcon, + path: + 'M3.5 5.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V12.5H10v5.75a.75.75 0 0 0 1.5 0V5.75a.75.75 0 0 0-1.5 0V11H3.5V5.75Zm11.92 2.085c.23-.46.914-1.335 2.58-1.335.843 0 1.46.26 1.86.639.398.376.64.921.64 1.611 0 .606-.161 1.026-.384 1.332-.228.314-.555.554-.953.735-.816.37-1.802.433-2.383.433a.75.75 0 0 0 0 1.5c.581 0 1.567.063 2.383.433.398.18.725.42.953.735.223.306.384.726.384 1.332 0 1.086-.914 2.25-2.5 2.25-1.727 0-2.348-.76-2.553-1.276a.75.75 0 1 0-1.394.552C14.508 17.926 15.727 19 18 19c2.414 0 4-1.836 4-3.75 0-.894-.245-1.63-.67-2.214A3.679 3.679 0 0 0 20.144 12a3.679 3.679 0 0 0 1.186-1.036c.425-.584.67-1.32.67-2.214 0-1.06-.383-2.015-1.11-2.702C20.165 5.364 19.157 5 18 5c-2.334 0-3.484 1.291-3.92 2.165a.75.75 0 1 0 1.34.67Z', +}; diff --git a/app/javascript/dashboard/components/widgets/WootWriter/src/marksInputRules.js b/app/javascript/dashboard/components/widgets/WootWriter/src/marksInputRules.js new file mode 100644 index 000000000..371b466a6 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/WootWriter/src/marksInputRules.js @@ -0,0 +1,248 @@ +/* eslint-disable no-useless-escape */ +import { inputRules } from 'prosemirror-inputrules'; +import { applyMarkOnRange } from './commands'; +import { createInputRule } from './utils'; + +const validCombos = { + '**': ['_', '~~'], + '*': ['__', '~~'], + __: ['*', '~~'], + _: ['**', '~~'], + '~~': ['__', '_', '**', '*'], +}; + +const validRegex = (char, str) => { + for (let i = 0; i < validCombos[char].length; i += 1) { + const ch = validCombos[char][i]; + if (ch === str) { + return true; + } + const matchLength = str.length - ch.length; + if (str.substr(matchLength, str.length) === ch) { + return validRegex(ch, str.substr(0, matchLength)); + } + } + return false; +}; + +function addMark(markType, schema, charSize, char) { + return (state, match, start, end) => { + const [, prefix, textWithCombo] = match; + const to = end; + // in case of *string* pattern it matches the text from beginning of the paragraph, + // because we want ** to work for strong text + // that's why "start" argument is wrong and we need to calculate it ourselves + const from = textWithCombo ? start + prefix.length : start; + const nodeBefore = state.doc.resolve(start + prefix.length).nodeBefore; + + if ( + prefix && + prefix.length > 0 && + !validRegex(char, prefix) && + !(nodeBefore && nodeBefore.type === state.schema.nodes.hard_break) + ) { + return null; + } + // fixes the following case: my `*name` is * + // expected result: should ignore special characters inside "code" + if ( + state.schema.marks.code && + state.schema.marks.code.isInSet(state.doc.resolve(from + 1).marks()) + ) { + return null; + } + + // Prevent autoformatting across hardbreaks + let containsHardBreak; + state.doc.nodesBetween(from, to, node => { + if (node.type === schema.nodes.hard_break) { + containsHardBreak = true; + return false; + } + return !containsHardBreak; + }); + if (containsHardBreak) { + return null; + } + + // fixes autoformatting in heading nodes: # Heading *bold* + // expected result: should not autoformat *bold*;

Heading *bold*

+ if (state.doc.resolve(from).sameParent(state.doc.resolve(to))) { + if (!state.doc.resolve(from).parent.type.allowsMarkType(markType)) { + return null; + } + } + + // apply mark to the range (from, to) + let tr = state.tr.addMark(from, to, markType.create()); + + if (charSize > 1) { + // delete special characters after the text + // Prosemirror removes the last symbol by itself, so we need to remove "charSize - 1" symbols + tr = tr.delete(to - (charSize - 1), to); + } + + return ( + tr + // delete special characters before the text + .delete(from, from + charSize) + .removeStoredMark(markType) + ); + }; +} + +function addCodeMark(markType, specialChar) { + return (state, match, start, end) => { + if (match[1] && match[1].length > 0) { + const allowedPrefixConditions = [ + prefix => { + return prefix === '('; + }, + prefix => { + const nodeBefore = state.doc.resolve(start + prefix.length) + .nodeBefore; + return ( + (nodeBefore && nodeBefore.type === state.schema.nodes.hard_break) || + false + ); + }, + ]; + + if (allowedPrefixConditions.every(condition => !condition(match[1]))) { + return null; + } + } + // fixes autoformatting in heading nodes: # Heading `bold` + // expected result: should not autoformat *bold*;

Heading `bold`

+ if (state.doc.resolve(start).sameParent(state.doc.resolve(end))) { + if (!state.doc.resolve(start).parent.type.allowsMarkType(markType)) { + return null; + } + } + + let tr = state.tr; + // checks if a selection exists and needs to be removed + if (state.selection.from !== state.selection.to) { + tr.delete(state.selection.from, state.selection.to); + end -= state.selection.to - state.selection.from; + } + + const regexStart = end - match[2].length + 1; + const codeMark = state.schema.marks.code.create(); + return applyMarkOnRange(regexStart, end, false, codeMark, tr) + .setStoredMarks([codeMark]) + .delete(regexStart, regexStart + specialChar.length) + .removeStoredMark(markType); + }; +} + +export const strongRegex1 = /(\S*)(\_\_([^\_\s](\_(?!\_)|[^\_])*[^\_\s]|[^\_\s])\_\_)$/; +export const strongRegex2 = /(\S*)(\*\*([^\*\s](\*(?!\*)|[^\*])*[^\*\s]|[^\*\s])\*\*)$/; +export const italicRegex1 = /(\S*[^\s\_]*)(\_([^\s\_][^\_]*[^\s\_]|[^\s\_])\_)$/; +export const italicRegex2 = /(\S*[^\s\*]*)(\*([^\s\*][^\*]*[^\s\*]|[^\s\*])\*)$/; +export const strikeRegex = /(\S*)(\~\~([^\s\~](\~(?!\~)|[^\~])*[^\s\~]|[^\s\~])\~\~)$/; +export const codeRegex = /(\S*)(`[^\s][^`]*`)$/; + +/** + * Create input rules for strong mark + * + * @param {Schema} schema + * @returns {InputRule[]} + */ +function getStrongInputRules(schema) { + // **string** or __strong__ should bold the text + + const markLength = 2; + const doubleUnderscoreRule = createInputRule( + strongRegex1, + addMark(schema.marks.strong, schema, markLength, '__') + ); + + const doubleAsterixRule = createInputRule( + strongRegex2, + addMark(schema.marks.strong, schema, markLength, '**') + ); + + return [doubleUnderscoreRule, doubleAsterixRule]; +} + +/** + * Create input rules for em mark + * + * @param {Schema} schema + * @returns {InputRule[]} + */ +function getItalicInputRules(schema) { + // *string* or _string_ should italic the text + const markLength = 1; + + const underscoreRule = createInputRule( + italicRegex1, + addMark(schema.marks.em, schema, markLength, '_') + ); + + const asterixRule = createInputRule( + italicRegex2, + addMark(schema.marks.em, schema, markLength, '*') + ); + + return [underscoreRule, asterixRule]; +} + +/** + * Create input rules for strike mark + * + * @param {Schema} schema + * @returns {InputRule[]} + */ +function getStrikeInputRules(schema) { + const markLength = 2; + const doubleTildeRule = createInputRule( + strikeRegex, + addMark(schema.marks.strike, schema, markLength, '~~') + ); + + return [doubleTildeRule]; +} + +/** + * Create input rules for code mark + * + * @param {Schema} schema + * @returns {InputRule[]} + */ +function getCodeInputRules(schema) { + const backTickRule = createInputRule( + codeRegex, + addCodeMark(schema.marks.code, '`') + ); + + return [backTickRule]; +} + +export function textFormattingInputRules(schema) { + const rules = []; + + if (schema.marks.strong) { + rules.push(...getStrongInputRules(schema)); + } + + if (schema.marks.em) { + rules.push(...getItalicInputRules(schema)); + } + + if (schema.marks.strike) { + rules.push(...getStrikeInputRules(schema)); + } + + if (schema.marks.code) { + rules.push(...getCodeInputRules(schema)); + } + + if (rules.length !== 0) { + return inputRules({ rules }); + } + return false; +} + +export default textFormattingInputRules; diff --git a/app/javascript/dashboard/components/widgets/WootWriter/src/menu.js b/app/javascript/dashboard/components/widgets/WootWriter/src/menu.js new file mode 100644 index 000000000..11ef94d09 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/WootWriter/src/menu.js @@ -0,0 +1,227 @@ +/* eslint-disable no-cond-assign */ +/* eslint-disable no-plusplus */ +import { MenuItem } from 'prosemirror-menu'; +import { toggleMark, setBlockType } from 'prosemirror-commands'; +import { undo, redo } from 'prosemirror-history'; +import { wrapInList } from 'prosemirror-schema-list'; +import { openPrompt } from '@chatwoot/prosemirror-schema/src/prompt'; +import { TextField } from '@chatwoot/prosemirror-schema/src/TextField'; +import { + BoldIcon, + ItalicsIcon, + CodeIcon, + UndoIcon, + RedoIcon, + LinkIcon, + Heading3Icon, + Heading2Icon, + Heading1Icon, + TextNumberListIcon, + BulletListIcon, +} from './icons'; +import { markActive } from './utils'; + +// Helpers to create specific types of items + +function cmdItem(cmd, options) { + let passedOptions = { + label: options.title, + run: cmd, + }; + Object.keys(options).reduce((acc, optionKey) => { + acc[optionKey] = options[optionKey]; + return acc; + }, passedOptions); + if ((!options.enable || options.enable === true) && !options.select) + passedOptions[options.enable ? 'enable' : 'select'] = state => cmd(state); + + return new MenuItem(passedOptions); +} + +function blockTypeIsActive(state, type, attrs) { + const { $from } = state.selection; + + let wrapperDepth; + let currentDepth = $from.depth; + while (currentDepth > 0) { + const currentNodeAtDepth = $from.node(currentDepth); + + const comparisonAttrs = { + ...attrs, + }; + // debugger; + if (currentNodeAtDepth.attrs.level) { + comparisonAttrs.level = currentNodeAtDepth.attrs.level; + } + const isType = type.name === currentNodeAtDepth.type.name; + const hasAttrs = Object.keys(attrs).reduce((prev, curr) => { + if (attrs[curr] !== currentNodeAtDepth.attrs[curr]) { + return false; + } + return prev; + }, true); + + if (isType && hasAttrs) { + wrapperDepth = currentDepth; + } + currentDepth -= 1; + } + + // return wrapperDepth !== undefined; + return wrapperDepth; +} + +const toggleBlockType = (type, attrs) => (state, dispatch) => { + const isActive = blockTypeIsActive(state, type, attrs); + const newNodeType = isActive ? state.schema.nodes.paragraph : type; + const setBlockFunction = setBlockType(newNodeType, attrs); + return setBlockFunction(state, dispatch); +}; + +function markItem(markType, options) { + let passedOptions = { + active(state) { + return markActive(state, markType); + }, + enable: true, + }; + Object.keys(options).reduce((acc, optionKey) => { + acc[optionKey] = options[optionKey]; + return acc; + }, passedOptions); + return cmdItem(toggleMark(markType), passedOptions); +} + +function linkItem(markType) { + return new MenuItem({ + title: 'Add or remove link', + icon: LinkIcon, + active(state) { + return markActive(state, markType); + }, + enable(state) { + return !state.selection.empty; + }, + run(state, dispatch, view) { + if (markActive(state, markType)) { + toggleMark(markType)(state, dispatch); + return true; + } + openPrompt({ + title: 'Create a link', + fields: { + href: new TextField({ + label: 'https://example.com', + class: 'small', + required: true, + }), + }, + callback(attrs) { + toggleMark(markType, attrs)(view.state, view.dispatch); + view.focus(); + }, + }); + return false; + }, + }); +} + +function headerItem(nodeType, options) { + const { level = 1 } = options; + return new MenuItem({ + title: `Heading ${level}`, + icon: options.icon, + active(state) { + return blockTypeIsActive(state, nodeType, { level }); + }, + enable() { + return true; + }, + run(state, dispatch, view) { + if (blockTypeIsActive(state, nodeType, { level })) { + toggleBlockType(nodeType, { level })(state, dispatch); + return true; + } + + toggleBlockType(nodeType, { level })(view.state, view.dispatch); + view.focus(); + + return false; + }, + }); +} + +function wrapListItem(nodeType, options) { + return cmdItem(wrapInList(nodeType, options.attrs), options); +} + +export function buildMenuItems(schema) { + let r = { + toggleStrong: markItem(schema.marks.strong, { + title: 'Toggle strong style', + icon: BoldIcon, + }), + toggleEm: markItem(schema.marks.em, { + title: 'Toggle emphasis', + icon: ItalicsIcon, + }), + toggleCode: markItem(schema.marks.code, { + title: 'Toggle code font', + icon: CodeIcon, + }), + toggleLink: linkItem(schema.marks.link), + wrapBulletList: wrapListItem(schema.nodes.bullet_list, { + title: 'Wrap in bullet list', + icon: BulletListIcon, + }), + wrapOrderedList: wrapListItem(schema.nodes.ordered_list, { + title: 'Wrap in ordered list', + icon: TextNumberListIcon, + }), + toggleH1: headerItem(schema.nodes.heading, { + level: 1, + title: 'Toggle code font', + icon: Heading1Icon, + }), + toggleH2: headerItem(schema.nodes.heading, { + level: 2, + title: 'Toggle code font', + icon: Heading2Icon, + }), + toggleH3: headerItem(schema.nodes.heading, { + level: 3, + title: 'Toggle code font', + icon: Heading3Icon, + }), + undoItem: new MenuItem({ + title: 'Undo last change', + run: undo, + enable: state => undo(state), + icon: UndoIcon, + }), + redoItem: new MenuItem({ + title: 'Redo last undone change', + run: redo, + enable: state => redo(state), + icon: RedoIcon, + }), + }; + + let cut = arr => arr.filter(x => x); + + r.inlineMenu = [ + cut([r.toggleStrong, r.toggleEm, r.toggleCode, r.toggleLink]), + ]; + r.blockMenu = [ + cut([ + r.toggleH1, + r.toggleH2, + r.toggleH3, + r.wrapBulletList, + r.wrapOrderedList, + ]), + ]; + r.fullMenu = r.inlineMenu.concat([[r.undoItem, r.redoItem]], r.blockMenu); + + return r; +} diff --git a/app/javascript/dashboard/components/widgets/WootWriter/src/utils.js b/app/javascript/dashboard/components/widgets/WootWriter/src/utils.js new file mode 100644 index 000000000..c7a807cf0 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/WootWriter/src/utils.js @@ -0,0 +1,225 @@ +import { InputRule } from 'prosemirror-inputrules'; +import { Fragment, Slice } from 'prosemirror-model'; +import { TextSelection } from 'prosemirror-state'; + +/** + * Determine if a mark (with specific attribute values) exists anywhere in the selection. + */ +export const markActive = (state, mark) => { + let { from, $from, to, empty } = state.selection; + if (empty) return mark.isInSet(state.storedMarks || $from.marks()); + return state.doc.rangeHasMark(from, to, mark); +}; + +export const hasCode = (state, pos) => { + const { code } = state.schema.marks; + const node = pos >= 0 && state.doc.nodeAt(pos); + if (node) { + return !!node.marks.filter(mark => mark.type === code).length; + } + + return false; +}; + +const hasUnsupportedMarkForBlockInputRule = (state, start, end) => { + const { + doc, + schema: { marks }, + } = state; + let unsupportedMarksPresent = false; + const isUnsupportedMark = node => + node.type === marks.code || node.type === marks.link; + doc.nodesBetween(start, end, node => { + unsupportedMarksPresent = + unsupportedMarksPresent || + node.marks.filter(isUnsupportedMark).length > 0; + }); + return unsupportedMarksPresent; +}; + +const hasUnsupportedMarkForInputRule = (state, start, end) => { + const { + doc, + schema: { marks }, + } = state; + let unsupportedMarksPresent = false; + const isCodemark = mark => mark.type === marks.code; + doc.nodesBetween(start, end, node => { + unsupportedMarksPresent = + unsupportedMarksPresent || node.marks.filter(isCodemark).length > 0; + }); + return unsupportedMarksPresent; +}; + +export function defaultInputRuleHandler(inputRule, isBlockNodeRule = false) { + const originalHandler = inputRule.handler; + inputRule.handler = (state, match, start, end) => { + const unsupportedMarks = isBlockNodeRule + ? hasUnsupportedMarkForBlockInputRule(state, start, end) + : hasUnsupportedMarkForInputRule(state, start, end); + if (state.selection.$from.parent.type.spec.code || unsupportedMarks) { + return false; + } + return originalHandler(state, match, start, end); + }; + return inputRule; +} + +export const createInputRule = (match, handler, isBlockNodeRule = false) => + defaultInputRuleHandler(new InputRule(match, handler), isBlockNodeRule); + +// ProseMirror uses the Unicode Character 'OBJECT REPLACEMENT CHARACTER' (U+FFFC) as text representation for +// leaf nodes, i.e. nodes that don't have any content or text property (e.g. hardBreak, emoji, mention, rule) +// It was introduced because of https://github.com/ProseMirror/prosemirror/issues/262 +// This can be used in an input rule regex to be able to include or exclude such nodes. +export const leafNodeReplacementCharacter = '\ufffc'; + +/** + * Returns false if node contains only empty inline nodes and hardBreaks. + */ +export function hasVisibleContent(node) { + const isInlineNodeHasVisibleContent = inlineNode => { + return inlineNode.isText + ? !!inlineNode.textContent.trim() + : inlineNode.type.name !== 'hardBreak'; + }; + + if (node.isInline) { + return isInlineNodeHasVisibleContent(node); + } + if (node.isBlock && (node.isLeaf || node.isAtom)) { + return true; + } + if (!node.childCount) { + return false; + } + + for (let index = 0; index < node.childCount; index += 1) { + const child = node.child(index); + + if (hasVisibleContent(child)) { + return true; + } + } + + return false; +} + +/** + * Checks if node is an empty paragraph. + */ +export function isEmptyParagraph(node) { + return ( + !node || + (node.type.name === 'paragraph' && !node.textContent && !node.childCount) + ); +} + +/** + * Checks if a node has any content. Ignores node that only contain empty block nodes. + */ +export function isNodeEmpty(node) { + if (node && node.textContent) { + return false; + } + + if ( + !node || + !node.childCount || + (node.childCount === 1 && isEmptyParagraph(node.firstChild)) + ) { + return true; + } + + const block = []; + const nonBlock = []; + + node.forEach(child => + child.isInline ? nonBlock.push(child) : block.push(child) + ); + + return ( + !nonBlock.length && + !block.filter( + childNode => + (!!childNode.childCount && + !( + childNode.childCount === 1 && isEmptyParagraph(childNode.firstChild) + )) || + childNode.isAtom + ).length + ); +} + +export const compose = (...functions) => args => + functions.reduceRight((arg, fn) => fn(arg), args); + +/** + * A helper to get the underlying array of a fragment. + */ +export function getFragmentBackingArray(fragment) { + return fragment.content; +} + +export function mapFragment(content, callback, parent) { + const children = []; + for (let i = 0, size = content.childCount; i < size; i += 1) { + const node = content.child(i); + const transformed = node.isLeaf + ? callback(node, parent, i) + : callback( + node.copy(mapFragment(node.content, callback, node)), + parent, + i + ); + if (transformed) { + if (transformed) { + children.push(...getFragmentBackingArray(transformed)); + } else if (Array.isArray(transformed)) { + children.push(...transformed); + } else { + children.push(transformed); + } + } + } + return Fragment.fromArray(children); +} + +export function mapSlice(slice, callback) { + const fragment = mapFragment(slice.content, callback); + return new Slice(fragment, slice.openStart, slice.openEnd); +} + +export function atTheEndOfDoc(state) { + const { selection, doc } = state; + return doc.nodeSize - selection.$to.pos - 2 === selection.$to.depth; +} + +export function canMoveDown(state) { + const { selection } = state; + + if (selection instanceof TextSelection) { + if (!selection.empty) { + return true; + } + } + + return !atTheEndOfDoc(state); +} + +export function atTheBeginningOfDoc(state) { + const { selection } = state; + return selection.$from.pos === selection.$from.depth; +} + +export function canMoveUp(state) { + const { selection } = state; + + if (selection instanceof TextSelection) { + if (!selection.empty) { + return true; + } + } + + return !atTheBeginningOfDoc(state); +} diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue index 856ce6a38..f31df89f4 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue @@ -14,8 +14,6 @@ v-model="articleContent" class="article-content" :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')" - :is-format-mode="true" - :override-line-breaks="true" @focus="onFocus" @blur="onBlur" @input="onContentInput" @@ -26,7 +24,8 @@