Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-19 06:21:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix tiptap editor types

Browse Source
This commit is contained in:
Philipinho
2024-04-05 01:16:07 +01:00
parent 1ea393b60c
commit 5ee74d49d7
8 changed files with 450 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/client/src/features/editor/components/slash-menu/render-items.ts
View File

@ -1,14 +1,16 @@
import { Editor } from '@tiptap/core';
import { ReactRenderer } from '@tiptap/react';
import CommandList from '@/features/editor/components/slash-menu/command-list';
import tippy from 'tippy.js';
import { ReactRenderer, useEditor } from "@tiptap/react";
import CommandList from "@/features/editor/components/slash-menu/command-list";
import tippy from "tippy.js";
const renderItems = () => {
let component: ReactRenderer | null = null;
let popup: any | null = null;
return {
onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
onStart: (props: {
editor: ReturnType<typeof useEditor>;
clientRect: DOMRect;
}) => {
component = new ReactRenderer(CommandList, {
props,
editor: props.editor,
@ -19,17 +21,20 @@ const renderItems = () => {
}
// @ts-ignore
popup = tippy('body', {
popup = tippy("body", {
getReferenceClientRect: props.clientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'bottom-start',
trigger: "manual",
placement: "bottom-start",
});
},
onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
onUpdate: (props: {
editor: ReturnType<typeof useEditor>;
clientRect: DOMRect;
}) => {
component?.updateProps(props);
if (!props.clientRect) {
@ -42,7 +47,7 @@ const renderItems = () => {
});
},
onKeyDown: (props: { event: KeyboardEvent }) => {
if (props.event.key === 'Escape') {
if (props.event.key === "Escape") {
popup?.[0].hide();
return true;

15
apps/client/src/features/editor/components/slash-menu/types.ts
View File

@ -1,16 +1,17 @@
import { Editor, Range } from '@tiptap/core';
import { Range } from "@tiptap/core";
import { useEditor } from "@tiptap/react";
export type CommandProps = {
editor: Editor;
editor: ReturnType<typeof useEditor>;
range: Range;
}
};
export type CommandListProps = {
items: SlashMenuGroupedItemsType;
command: (item: SlashMenuItemType) => void;
editor: Editor;
editor: ReturnType<typeof useEditor>;
range: Range;
}
};
export type SlashMenuItemType = {
title: string;
@ -19,8 +20,8 @@ export type SlashMenuItemType = {
separator?: true;
searchTerms: string[];
command: (props: CommandProps) => void;
disable?: (editor: Editor) => boolean;
}
disable?: (editor: ReturnType<typeof useEditor>) => boolean;
};
export type SlashMenuGroupedItemsType = {
[category: string]: SlashMenuItemType[];