utils.ts 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. import type { Node, NodeType, ResolvedPos, Mark, MarkType, Schema } from 'prosemirror-model';
  2. import type { EditorState, Selection } from 'prosemirror-state';
  3. import type { EditorView } from 'prosemirror-view';
  4. import { selectAll } from 'prosemirror-commands';
  5. export const isList = (node: Node, schema: Schema) => {
  6. return node.type === schema.nodes.bullet_list || node.type === schema.nodes.ordered_list;
  7. };
  8. export const autoSelectAll = (view: EditorView) => {
  9. const { empty } = view.state.selection;
  10. if (empty) selectAll(view.state, view.dispatch);
  11. };
  12. export const addMark = (
  13. editorView: EditorView,
  14. mark: Mark,
  15. selection?: { from: number; to: number },
  16. ) => {
  17. if (selection) {
  18. editorView.dispatch(editorView.state.tr.addMark(selection.from, selection.to, mark));
  19. } else {
  20. const { $from, $to } = editorView.state.selection;
  21. editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark));
  22. }
  23. };
  24. export const findNodesWithSameMark = (doc: Node, from: number, to: number, markType: MarkType) => {
  25. let ii = from;
  26. const finder = (mark: Mark) => mark.type === markType;
  27. let firstMark = null;
  28. let fromNode = null;
  29. let toNode = null;
  30. while (ii <= to) {
  31. const node = doc.nodeAt(ii);
  32. if (!node || !node.marks) return null;
  33. const mark = node.marks.find(finder);
  34. if (!mark) return null;
  35. if (firstMark && mark !== firstMark) return null;
  36. fromNode = fromNode || node;
  37. firstMark = firstMark || mark;
  38. toNode = node;
  39. ii++;
  40. }
  41. let fromPos = from;
  42. let toPos = to;
  43. let jj = 0;
  44. ii = from - 1;
  45. while (ii > jj) {
  46. const node = doc.nodeAt(ii);
  47. const mark = node && node.marks.find(finder);
  48. if (!mark || mark !== firstMark) break;
  49. fromPos = ii;
  50. fromNode = node;
  51. ii--;
  52. }
  53. ii = to + 1;
  54. jj = doc.nodeSize - 2;
  55. while (ii < jj) {
  56. const node = doc.nodeAt(ii);
  57. const mark = node && node.marks.find(finder);
  58. if (!mark || mark !== firstMark) break;
  59. toPos = ii;
  60. toNode = node;
  61. ii++;
  62. }
  63. return {
  64. mark: firstMark,
  65. from: {
  66. node: fromNode,
  67. pos: fromPos,
  68. },
  69. to: {
  70. node: toNode,
  71. pos: toPos,
  72. },
  73. };
  74. };
  75. const equalNodeType = (nodeType: NodeType, node: Node) => {
  76. return (Array.isArray(nodeType) && nodeType.indexOf(node.type) > -1) || node.type === nodeType;
  77. };
  78. const findParentNodeClosestToPos = ($pos: ResolvedPos, predicate: (node: Node) => boolean) => {
  79. for (let i = $pos.depth; i > 0; i--) {
  80. const node = $pos.node(i);
  81. if (predicate(node)) {
  82. return {
  83. pos: i > 0 ? $pos.before(i) : 0,
  84. start: $pos.start(i),
  85. depth: i,
  86. node,
  87. };
  88. }
  89. }
  90. };
  91. export const findParentNode = (predicate: (node: Node) => boolean) => {
  92. return (_ref: Selection) => findParentNodeClosestToPos(_ref.$from, predicate);
  93. };
  94. export const findParentNodeOfType = (nodeType: NodeType) => {
  95. return (selection: Selection) => {
  96. return findParentNode((node: Node) => {
  97. return equalNodeType(nodeType, node);
  98. })(selection);
  99. };
  100. };
  101. export const isActiveOfParentNodeType = (nodeType: string, state: EditorState) => {
  102. const node = state.schema.nodes[nodeType];
  103. return !!findParentNodeOfType(node)(state.selection);
  104. };
  105. export const getLastTextNode = (node: Node | null): Node | null => {
  106. if (!node) return null;
  107. if (node.type.name === 'text') return node;
  108. if (!node.lastChild) return null;
  109. return getLastTextNode(node.lastChild);
  110. };
  111. export const getMarkAttrs = (view: EditorView) => {
  112. const { selection, doc } = view.state;
  113. const { from } = selection;
  114. let node = doc.nodeAt(from) || doc.nodeAt(from - 1);
  115. node = getLastTextNode(node);
  116. return node?.marks || [];
  117. };
  118. export const getAttrValue = (
  119. marks: readonly Mark[],
  120. markType: string,
  121. attr: string,
  122. ): string | null => {
  123. for (const mark of marks) {
  124. if (mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr];
  125. }
  126. return null;
  127. };
  128. export const isActiveMark = (marks: readonly Mark[], markType: string) => {
  129. for (const mark of marks) {
  130. if (mark.type.name === markType) return true;
  131. }
  132. return false;
  133. };
  134. export const markActive = (state: EditorState, type: MarkType) => {
  135. const { from, $from, to, empty } = state.selection;
  136. if (empty) return type.isInSet(state.storedMarks || $from.marks());
  137. return state.doc.rangeHasMark(from, to, type);
  138. };
  139. export const getAttrValueInSelection = (view: EditorView, attr: string) => {
  140. const { selection, doc } = view.state;
  141. const { from, to } = selection;
  142. let keepChecking = true;
  143. let value = '';
  144. doc.nodesBetween(from, to, (node) => {
  145. if (keepChecking && node.attrs[attr]) {
  146. keepChecking = false;
  147. value = node.attrs[attr];
  148. }
  149. return keepChecking;
  150. });
  151. return value;
  152. };
  153. type Align = 'left' | 'right' | 'center';
  154. interface DefaultAttrs {
  155. color: string;
  156. backcolor: string;
  157. fontsize: string;
  158. fontname: string;
  159. align: Align;
  160. }
  161. const _defaultAttrs: DefaultAttrs = {
  162. color: '#000000',
  163. backcolor: '',
  164. fontsize: '16px',
  165. fontname: '',
  166. align: 'left',
  167. };
  168. export const getTextAttrs = (view: EditorView, attrs: Partial<DefaultAttrs> = {}) => {
  169. const defaultAttrs: DefaultAttrs = { ..._defaultAttrs, ...attrs };
  170. const marks = getMarkAttrs(view);
  171. const isBold = isActiveMark(marks, 'strong');
  172. const isEm = isActiveMark(marks, 'em');
  173. const isUnderline = isActiveMark(marks, 'underline');
  174. const isStrikethrough = isActiveMark(marks, 'strikethrough');
  175. const isSuperscript = isActiveMark(marks, 'superscript');
  176. const isSubscript = isActiveMark(marks, 'subscript');
  177. const isCode = isActiveMark(marks, 'code');
  178. const color = getAttrValue(marks, 'forecolor', 'color') || defaultAttrs.color;
  179. const backcolor = getAttrValue(marks, 'backcolor', 'backcolor') || defaultAttrs.backcolor;
  180. const fontsize = getAttrValue(marks, 'fontsize', 'fontsize') || defaultAttrs.fontsize;
  181. const fontname = getAttrValue(marks, 'fontname', 'fontname') || defaultAttrs.fontname;
  182. const link = getAttrValue(marks, 'link', 'href') || '';
  183. const align = (getAttrValueInSelection(view, 'align') || defaultAttrs.align) as Align;
  184. const isBulletList = isActiveOfParentNodeType('bullet_list', view.state);
  185. const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state);
  186. const isBlockquote = isActiveOfParentNodeType('blockquote', view.state);
  187. return {
  188. bold: isBold,
  189. em: isEm,
  190. underline: isUnderline,
  191. strikethrough: isStrikethrough,
  192. superscript: isSuperscript,
  193. subscript: isSubscript,
  194. code: isCode,
  195. color: color,
  196. backcolor: backcolor,
  197. fontsize: fontsize,
  198. fontname: fontname,
  199. link: link,
  200. align: align,
  201. bulletList: isBulletList,
  202. orderedList: isOrderedList,
  203. blockquote: isBlockquote,
  204. };
  205. };
  206. export type TextAttrs = ReturnType<typeof getTextAttrs>;
  207. export const getFontsize = (view: EditorView) => {
  208. const marks = getMarkAttrs(view);
  209. const fontsize = getAttrValue(marks, 'fontsize', 'fontsize') || _defaultAttrs.fontsize;
  210. return parseInt(fontsize);
  211. };
  212. export const defaultRichTextAttrs: TextAttrs = {
  213. bold: false,
  214. em: false,
  215. underline: false,
  216. strikethrough: false,
  217. superscript: false,
  218. subscript: false,
  219. code: false,
  220. color: '#000000',
  221. backcolor: '',
  222. fontsize: '16px',
  223. fontname: '',
  224. link: '',
  225. align: 'left',
  226. bulletList: false,
  227. orderedList: false,
  228. blockquote: false,
  229. };