| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- import type { Node, NodeType, ResolvedPos, Mark, MarkType, Schema } from 'prosemirror-model';
- import type { EditorState, Selection } from 'prosemirror-state';
- import type { EditorView } from 'prosemirror-view';
- import { selectAll } from 'prosemirror-commands';
- export const isList = (node: Node, schema: Schema) => {
- return node.type === schema.nodes.bullet_list || node.type === schema.nodes.ordered_list;
- };
- export const autoSelectAll = (view: EditorView) => {
- const { empty } = view.state.selection;
- if (empty) selectAll(view.state, view.dispatch);
- };
- export const addMark = (
- editorView: EditorView,
- mark: Mark,
- selection?: { from: number; to: number },
- ) => {
- if (selection) {
- editorView.dispatch(editorView.state.tr.addMark(selection.from, selection.to, mark));
- } else {
- const { $from, $to } = editorView.state.selection;
- editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark));
- }
- };
- export const findNodesWithSameMark = (doc: Node, from: number, to: number, markType: MarkType) => {
- let ii = from;
- const finder = (mark: Mark) => mark.type === markType;
- let firstMark = null;
- let fromNode = null;
- let toNode = null;
- while (ii <= to) {
- const node = doc.nodeAt(ii);
- if (!node || !node.marks) return null;
- const mark = node.marks.find(finder);
- if (!mark) return null;
- if (firstMark && mark !== firstMark) return null;
- fromNode = fromNode || node;
- firstMark = firstMark || mark;
- toNode = node;
- ii++;
- }
- let fromPos = from;
- let toPos = to;
- let jj = 0;
- ii = from - 1;
- while (ii > jj) {
- const node = doc.nodeAt(ii);
- const mark = node && node.marks.find(finder);
- if (!mark || mark !== firstMark) break;
- fromPos = ii;
- fromNode = node;
- ii--;
- }
- ii = to + 1;
- jj = doc.nodeSize - 2;
- while (ii < jj) {
- const node = doc.nodeAt(ii);
- const mark = node && node.marks.find(finder);
- if (!mark || mark !== firstMark) break;
- toPos = ii;
- toNode = node;
- ii++;
- }
- return {
- mark: firstMark,
- from: {
- node: fromNode,
- pos: fromPos,
- },
- to: {
- node: toNode,
- pos: toPos,
- },
- };
- };
- const equalNodeType = (nodeType: NodeType, node: Node) => {
- return (Array.isArray(nodeType) && nodeType.indexOf(node.type) > -1) || node.type === nodeType;
- };
- const findParentNodeClosestToPos = ($pos: ResolvedPos, predicate: (node: Node) => boolean) => {
- for (let i = $pos.depth; i > 0; i--) {
- const node = $pos.node(i);
- if (predicate(node)) {
- return {
- pos: i > 0 ? $pos.before(i) : 0,
- start: $pos.start(i),
- depth: i,
- node,
- };
- }
- }
- };
- export const findParentNode = (predicate: (node: Node) => boolean) => {
- return (_ref: Selection) => findParentNodeClosestToPos(_ref.$from, predicate);
- };
- export const findParentNodeOfType = (nodeType: NodeType) => {
- return (selection: Selection) => {
- return findParentNode((node: Node) => {
- return equalNodeType(nodeType, node);
- })(selection);
- };
- };
- export const isActiveOfParentNodeType = (nodeType: string, state: EditorState) => {
- const node = state.schema.nodes[nodeType];
- return !!findParentNodeOfType(node)(state.selection);
- };
- export const getLastTextNode = (node: Node | null): Node | null => {
- if (!node) return null;
- if (node.type.name === 'text') return node;
- if (!node.lastChild) return null;
- return getLastTextNode(node.lastChild);
- };
- export const getMarkAttrs = (view: EditorView) => {
- const { selection, doc } = view.state;
- const { from } = selection;
- let node = doc.nodeAt(from) || doc.nodeAt(from - 1);
- node = getLastTextNode(node);
- return node?.marks || [];
- };
- export const getAttrValue = (
- marks: readonly Mark[],
- markType: string,
- attr: string,
- ): string | null => {
- for (const mark of marks) {
- if (mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr];
- }
- return null;
- };
- export const isActiveMark = (marks: readonly Mark[], markType: string) => {
- for (const mark of marks) {
- if (mark.type.name === markType) return true;
- }
- return false;
- };
- export const markActive = (state: EditorState, type: MarkType) => {
- const { from, $from, to, empty } = state.selection;
- if (empty) return type.isInSet(state.storedMarks || $from.marks());
- return state.doc.rangeHasMark(from, to, type);
- };
- export const getAttrValueInSelection = (view: EditorView, attr: string) => {
- const { selection, doc } = view.state;
- const { from, to } = selection;
- let keepChecking = true;
- let value = '';
- doc.nodesBetween(from, to, (node) => {
- if (keepChecking && node.attrs[attr]) {
- keepChecking = false;
- value = node.attrs[attr];
- }
- return keepChecking;
- });
- return value;
- };
- type Align = 'left' | 'right' | 'center';
- interface DefaultAttrs {
- color: string;
- backcolor: string;
- fontsize: string;
- fontname: string;
- align: Align;
- }
- const _defaultAttrs: DefaultAttrs = {
- color: '#000000',
- backcolor: '',
- fontsize: '16px',
- fontname: '',
- align: 'left',
- };
- export const getTextAttrs = (view: EditorView, attrs: Partial<DefaultAttrs> = {}) => {
- const defaultAttrs: DefaultAttrs = { ..._defaultAttrs, ...attrs };
- const marks = getMarkAttrs(view);
- const isBold = isActiveMark(marks, 'strong');
- const isEm = isActiveMark(marks, 'em');
- const isUnderline = isActiveMark(marks, 'underline');
- const isStrikethrough = isActiveMark(marks, 'strikethrough');
- const isSuperscript = isActiveMark(marks, 'superscript');
- const isSubscript = isActiveMark(marks, 'subscript');
- const isCode = isActiveMark(marks, 'code');
- const color = getAttrValue(marks, 'forecolor', 'color') || defaultAttrs.color;
- const backcolor = getAttrValue(marks, 'backcolor', 'backcolor') || defaultAttrs.backcolor;
- const fontsize = getAttrValue(marks, 'fontsize', 'fontsize') || defaultAttrs.fontsize;
- const fontname = getAttrValue(marks, 'fontname', 'fontname') || defaultAttrs.fontname;
- const link = getAttrValue(marks, 'link', 'href') || '';
- const align = (getAttrValueInSelection(view, 'align') || defaultAttrs.align) as Align;
- const isBulletList = isActiveOfParentNodeType('bullet_list', view.state);
- const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state);
- const isBlockquote = isActiveOfParentNodeType('blockquote', view.state);
- return {
- bold: isBold,
- em: isEm,
- underline: isUnderline,
- strikethrough: isStrikethrough,
- superscript: isSuperscript,
- subscript: isSubscript,
- code: isCode,
- color: color,
- backcolor: backcolor,
- fontsize: fontsize,
- fontname: fontname,
- link: link,
- align: align,
- bulletList: isBulletList,
- orderedList: isOrderedList,
- blockquote: isBlockquote,
- };
- };
- export type TextAttrs = ReturnType<typeof getTextAttrs>;
- export const getFontsize = (view: EditorView) => {
- const marks = getMarkAttrs(view);
- const fontsize = getAttrValue(marks, 'fontsize', 'fontsize') || _defaultAttrs.fontsize;
- return parseInt(fontsize);
- };
- export const defaultRichTextAttrs: TextAttrs = {
- bold: false,
- em: false,
- underline: false,
- strikethrough: false,
- superscript: false,
- subscript: false,
- code: false,
- color: '#000000',
- backcolor: '',
- fontsize: '16px',
- fontname: '',
- link: '',
- align: 'left',
- bulletList: false,
- orderedList: false,
- blockquote: false,
- };
|