slate#Editor TypeScript Examples

withLinks = <T extends Editor>(editor: T): T & LinkEditor => {
  const e = editor as T & LinkEditor;

  const { insertData, insertText, isInline } = e;

  e.isInline = (element: Element) => {
    return element.type === "link" ? true : isInline(element);
  };

  e.insertText = (text: string): void => {
    if (text && isUrl(text)) {
      wrapLink(editor, text);
    } else {
      insertText(text);
    }
  };

  e.insertData = (data: DataTransfer): void => {
    const text = data.getData("text/plain");

    if (text && isUrl(text)) {
      wrapLink(editor, text);
    } else {
      insertData(data);
    }
  };

  return e;
}

Transforms = (() => {
  const {select} = SlateTransforms
  SlateTransforms.select = (editor: Editor, target: Location) => {
    if(isVueObject(target)) {
      target = clone(target)
    }
    return select(editor, target)
  }
  return SlateTransforms
})()

wrapLink = (editor: Editor, url?: string, newTab?: boolean): void => {
  const { selection, blurSelection } = editor;

  if (blurSelection) {
    Transforms.select(editor, blurSelection);
  }

  if (isElementActive(editor, 'link')) {
    unwrapLink(editor);
  } else {
    const selectionToUse = selection || blurSelection;

    const isCollapsed = selectionToUse && Range.isCollapsed(selectionToUse);

    const link = {
      type: 'link',
      url,
      newTab,
      children: isCollapsed ? [{ text: url }] : [],
    };

    if (isCollapsed) {
      Transforms.insertNodes(editor, link);
    } else {
      Transforms.wrapNodes(editor, link, { split: true });
      Transforms.collapse(editor, { edge: 'end' });
    }
  }
}

applyOp = (
  snapshot: Editor,
  ops: Operation[] | Operation
): Editor => {
  slateType.normalize(ops).forEach((op) => {
    checkOp(snapshot, op);
    slateType.apply(snapshot, op);
  });
  return snapshot;
}

toggleBlock = (editor: Editor, format: string): void => {
  const isActive = isBlockActive(editor, format);
  const isList = LIST_TYPES.includes(format);

  Transforms.unwrapNodes(editor, {
    match: (n) => LIST_TYPES.includes(n.type as any),
    split: true,
  });

  Transforms.setNodes(editor, {
    type: isActive ? "paragraph" : isList ? "list-item" : format,
  });

  if (!isActive && isList) {
    const block = { type: format, children: [] };
    Transforms.wrapNodes(editor, block);
  }
}

toggleMark = (editor: Editor, format: string) => {
  const isActive = isMarkActive(editor, format);

  if (isActive) {
    Editor.removeMark(editor, format);
  } else {
    Editor.addMark(editor, format, true);
  }
}

toggleMark = (editor: Editor, key: string, clear: string | string[] = []) => {
  const isActive = isMarkActive(editor, key);
  if (isActive) {
    editor.removeMark(key);
    return;
  }

  const clears: string[] = castArray(clear);
  clears.forEach(item => {
    editor.removeMark(item);
  });
  editor.addMark(key, true);
}

getChildren = (node: Node): any => {
  return Editor.isEditor(node) ? (node as any)._state: (node as any).children
}

useLastFocused = (editor: ReactEditor) => {
  const [state, setState] = useState<LastFocusedState>({
    element: undefined,
    point: undefined,
    selection: undefined,
  });
  const current = getActiveNodeType(editor);

  useEffect(() => {
    if (!ReactEditor.isFocused(editor)) {
      return;
    }
    const { selection } = editor;
    if (!selection) {
      return;
    }
    if (current) {
      const point = selection.focus;
      const [element] = Editor.parent(editor, point);
      if (
        state.element === element &&
        state.point &&
        Point.equals(state.point, point)
      ) {
        return;
      }
      setState({
        element: element,
        point,
        selection: clone(selection),
      });
    }
  }, [current, state, editor.operations]);

  return state;
}

injectVoidElement = (editor: Editor, element: Element): void => {
  const lastSelectedElementIsEmpty = isLastSelectedElementEmpty(editor);
  const previous = Editor.previous(editor);

  if (lastSelectedElementIsEmpty) {
    // If previous node is void
    if (Editor.isVoid(editor, previous?.[0])) {
      // Insert a blank element between void nodes
      // so user can place cursor between void nodes
      Transforms.insertNodes(editor, { children: [{ text: '' }] });
      Transforms.setNodes(editor, element);
    // Otherwise just set the empty node equal to new void
    } else {
      Transforms.setNodes(editor, element);
    }
  } else {
    Transforms.insertNodes(editor, element);
  }

  // Add an empty node after the new void
  Transforms.insertNodes(editor, { children: [{ text: '' }] });
}

toggleBlock = (editor, format) => {
  const isActive = isBlockActive(editor, format)
  const isList = LIST_TYPES.includes(format)

  Transforms.unwrapNodes(editor, {
    match: (n) =>
      !Editor.isEditor(n) &&
      SlateElement.isElement(n) &&
      LIST_TYPES.includes(n.type),
    split: true
  })
  const newProperties: Partial<SlateElement> = {
    type: isActive ? 'paragraph' : isList ? 'list-item' : format
  }
  Transforms.setNodes(editor, newProperties)

  if (!isActive && isList) {
    const block = { type: format, children: [] }
    Transforms.wrapNodes(editor, block)
  }
}

/**
 * Overload slateType create function for easier random op generation
 */
slateType.create = function (init: Element) {
  console.log('called create in SlateType');
  init = _.cloneDeep(testDoc);
  const e = createEditor();
  e.children = init.children;
  return <Editor>init;
};

withImage = (editor: Editor) => {
    const { isVoid } = editor;

    editor.isVoid = (element) => {
        return element.type === 'image' || isVoid(element);
    };

    return editor;
}

isBlockActive = (editor: Editor, format: string): boolean => {
  const [match] = Editor.nodes(editor, {
    match: (n) => n.type === format,
  });

  return !!match;
}

isBlockActive = (editor: Editor, format: string) => {
  const [match] = Editor.nodes(editor, {
    match: (n) => n.type === format,
  });

  return !!match;
}

export function pipe(x: Editor, ...fns: Function[]) {
  return fns.reduce((y: any, fn) => fn(y), x);
}