snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

packages/editor/src/constants/assets.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import type { TAssetMetaDataRecord } from "@/helpers/assets";
+// local imports
+import type { ADDITIONAL_EXTENSIONS } from "./extensions";
+
+export const ADDITIONAL_ASSETS_META_DATA_RECORD: Partial<Record<ADDITIONAL_EXTENSIONS, TAssetMetaDataRecord>> = {};

packages/editor/src/constants/common.ts

@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ComponentType, SVGProps } from "react";
+import {
+  AlignCenterOutline,
+  AlignLeftOutline,
+  AlignRightOutline,
+  BoldOutline,
+  CodeOutline,
+  H1Outline,
+  H2Outline,
+  H3Outline,
+  H4Outline,
+  H5Outline,
+  H6Outline,
+  ImageOutline,
+  ItalicOutline,
+  ListOutline,
+  NumberedListOutline,
+  QuoteOutline,
+  StrikethroughOutline,
+  TableEditorOutline,
+  TextOutline,
+  ToDoOutline,
+  UnderlineOutline,
+} from "@makeplane/propel/icons";
+import { MonospaceIcon, SansSerifIcon, SerifIcon } from "@plane/propel/icons";
+import type { TCommandExtraProps, TEditorCommands, TEditorFontStyle } from "@/types";
+
+export type TEditorTypes = "lite" | "document" | "sticky";
+
+// Utility type to enforce the necessary extra props or make extraProps optional
+export type ExtraPropsForCommand<T extends TEditorCommands> = T extends keyof TCommandExtraProps
+  ? TCommandExtraProps[T]
+  : object; // Default to empty object for commands without extra props
+
+export type ToolbarMenuItem<T extends TEditorCommands = TEditorCommands> = {
+  itemKey: T;
+  renderKey: string;
+  name: string;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  shortcut?: string[];
+  editors: TEditorTypes[];
+  extraProps?: ExtraPropsForCommand<T>;
+};
+
+export const TYPOGRAPHY_ITEMS: ToolbarMenuItem<"text" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6">[] = [
+  { itemKey: "text", renderKey: "text", name: "Text", icon: TextOutline, editors: ["document"] },
+  { itemKey: "h1", renderKey: "h1", name: "Heading 1", icon: H1Outline, editors: ["document"] },
+  { itemKey: "h2", renderKey: "h2", name: "Heading 2", icon: H2Outline, editors: ["document"] },
+  { itemKey: "h3", renderKey: "h3", name: "Heading 3", icon: H3Outline, editors: ["document"] },
+  { itemKey: "h4", renderKey: "h4", name: "Heading 4", icon: H4Outline, editors: ["document"] },
+  { itemKey: "h5", renderKey: "h5", name: "Heading 5", icon: H5Outline, editors: ["document"] },
+  { itemKey: "h6", renderKey: "h6", name: "Heading 6", icon: H6Outline, editors: ["document"] },
+];
+
+export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-left",
+    name: "Left align",
+    icon: AlignLeftOutline,
+    shortcut: ["Cmd", "Shift", "L"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "left",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-center",
+    name: "Center align",
+    icon: AlignCenterOutline,
+    shortcut: ["Cmd", "Shift", "E"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "center",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-right",
+    name: "Right align",
+    icon: AlignRightOutline,
+    shortcut: ["Cmd", "Shift", "R"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "right",
+    },
+  },
+];
+
+const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strikethrough">[] = [
+  {
+    itemKey: "bold",
+    renderKey: "bold",
+    name: "Bold",
+    icon: BoldOutline,
+    shortcut: ["Cmd", "B"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "italic",
+    renderKey: "italic",
+    name: "Italic",
+    icon: ItalicOutline,
+    shortcut: ["Cmd", "I"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "underline",
+    renderKey: "underline",
+    name: "Underline",
+    icon: UnderlineOutline,
+    shortcut: ["Cmd", "U"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "strikethrough",
+    renderKey: "strikethrough",
+    name: "Strikethrough",
+    icon: StrikethroughOutline,
+    shortcut: ["Cmd", "Shift", "S"],
+    editors: ["lite", "document"],
+  },
+];
+
+const LIST_ITEMS: ToolbarMenuItem<"bulleted-list" | "numbered-list" | "to-do-list">[] = [
+  {
+    itemKey: "bulleted-list",
+    renderKey: "bulleted-list",
+    name: "Bulleted list",
+    icon: ListOutline,
+    shortcut: ["Cmd", "Shift", "7"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "numbered-list",
+    renderKey: "numbered-list",
+    name: "Numbered list",
+    icon: NumberedListOutline,
+    shortcut: ["Cmd", "Shift", "8"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "to-do-list",
+    renderKey: "to-do-list",
+    name: "To-do list",
+    icon: ToDoOutline,
+    shortcut: ["Cmd", "Shift", "9"],
+    editors: ["lite", "document"],
+  },
+];
+
+export const USER_ACTION_ITEMS: ToolbarMenuItem<"quote" | "code">[] = [
+  { itemKey: "quote", renderKey: "quote", name: "Quote", icon: QuoteOutline, editors: ["lite", "document"] },
+  { itemKey: "code", renderKey: "code", name: "Code", icon: CodeOutline, editors: ["lite", "document"] },
+];
+
+export const COMPLEX_ITEMS: ToolbarMenuItem<"table" | "image">[] = [
+  { itemKey: "table", renderKey: "table", name: "Table", icon: TableEditorOutline, editors: ["document"] },
+  { itemKey: "image", renderKey: "image", name: "Image", icon: ImageOutline, editors: ["lite", "document"] },
+];
+
+export const IMAGE_ITEM = COMPLEX_ITEMS.find((item): item is ToolbarMenuItem<"image"> => item.itemKey === "image")!;
+
+export const TOOLBAR_ITEMS: {
+  [editorType in TEditorTypes]: {
+    [key: string]: ToolbarMenuItem[];
+  };
+} = {
+  lite: {
+    basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes("lite")),
+    alignment: TEXT_ALIGNMENT_ITEMS.filter((item) => item.editors.includes("lite")),
+    list: LIST_ITEMS.filter((item) => item.editors.includes("lite")),
+    userAction: USER_ACTION_ITEMS.filter((item) => item.editors.includes("lite")),
+    complex: COMPLEX_ITEMS.filter((item) => item.editors.includes("lite")),
+  },
+  document: {
+    basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes("document")),
+    alignment: TEXT_ALIGNMENT_ITEMS.filter((item) => item.editors.includes("document")),
+    list: LIST_ITEMS.filter((item) => item.editors.includes("document")),
+    userAction: USER_ACTION_ITEMS.filter((item) => item.editors.includes("document")),
+    complex: COMPLEX_ITEMS.filter((item) => item.editors.includes("document")),
+  },
+  sticky: {
+    basic: BASIC_MARK_ITEMS.filter((item) => ["bold", "italic"].includes(item.itemKey)),
+    list: LIST_ITEMS.filter((item) => ["to-do-list"].includes(item.itemKey)),
+  },
+};
+
+export const COLORS_LIST: {
+  key: string;
+  label: string;
+  textColor: string;
+  backgroundColor: string;
+}[] = [
+  {
+    key: "gray",
+    label: "Gray",
+    textColor: "var(--editor-colors-gray-text)",
+    backgroundColor: "var(--editor-colors-gray-background)",
+  },
+  {
+    key: "peach",
+    label: "Peach",
+    textColor: "var(--editor-colors-peach-text)",
+    backgroundColor: "var(--editor-colors-peach-background)",
+  },
+  {
+    key: "pink",
+    label: "Pink",
+    textColor: "var(--editor-colors-pink-text)",
+    backgroundColor: "var(--editor-colors-pink-background)",
+  },
+  {
+    key: "orange",
+    label: "Orange",
+    textColor: "var(--editor-colors-orange-text)",
+    backgroundColor: "var(--editor-colors-orange-background)",
+  },
+  {
+    key: "green",
+    label: "Green",
+    textColor: "var(--editor-colors-green-text)",
+    backgroundColor: "var(--editor-colors-green-background)",
+  },
+  {
+    key: "light-blue",
+    label: "Light blue",
+    textColor: "var(--editor-colors-light-blue-text)",
+    backgroundColor: "var(--editor-colors-light-blue-background)",
+  },
+  {
+    key: "dark-blue",
+    label: "Dark blue",
+    textColor: "var(--editor-colors-dark-blue-text)",
+    backgroundColor: "var(--editor-colors-dark-blue-background)",
+  },
+  {
+    key: "purple",
+    label: "Purple",
+    textColor: "var(--editor-colors-purple-text)",
+    backgroundColor: "var(--editor-colors-purple-background)",
+  },
+  // {
+  //   key: "pink-blue-gradient",
+  //   label: "Pink blue gradient",
+  //   textColor: "var(--editor-colors-pink-blue-gradient-text)",
+  //   backgroundColor: "var(--editor-colors-pink-blue-gradient-background)",
+  // },
+];
+
+export const EDITOR_FONT_STYLES: {
+  key: TEditorFontStyle;
+  label: string;
+  icon: React.FC;
+}[] = [
+  { key: "sans-serif", label: "Sans serif", icon: SansSerifIcon },
+  { key: "serif", label: "Serif", icon: SerifIcon },
+  { key: "monospace", label: "Mono", icon: MonospaceIcon },
+];

packages/editor/src/constants/config.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { TDisplayConfig } from "@/types";
+
+export const DEFAULT_DISPLAY_CONFIG: TDisplayConfig = {
+  fontSize: "large-font",
+  fontStyle: "sans-serif",
+  lineSpacing: "regular",
+  wideLayout: false,
+};
+
+export const ACCEPTED_IMAGE_MIME_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"];
+
+export const ACCEPTED_ATTACHMENT_MIME_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/svg+xml",
+  "image/webp",
+  "image/tiff",
+  "image/bmp",
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "text/plain",
+  "text/markdown",
+  "application/rtf",
+  "audio/mpeg",
+  "audio/wav",
+  "audio/ogg",
+  "audio/midi",
+  "audio/x-midi",
+  "audio/aac",
+  "audio/flac",
+  "audio/x-m4a",
+  "video/mp4",
+  "video/mpeg",
+  "video/ogg",
+  "video/webm",
+  "video/quicktime",
+  "video/x-msvideo",
+  "video/x-ms-wmv",
+  "application/zip",
+  "application/x-rar-compressed",
+  "application/x-tar",
+  "application/gzip",
+  "model/gltf-binary",
+  "model/gltf+json",
+  "application/octet-stream",
+  "font/ttf",
+  "font/otf",
+  "font/woff",
+  "font/woff2",
+  "text/css",
+  "text/javascript",
+  "application/json",
+  "text/xml",
+  "text/csv",
+  "application/xml",
+];

packages/editor/src/constants/document-collaborative-events.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EPageAccess } from "@plane/constants";
+import type { TPage } from "@plane/types";
+import type { CreatePayload, BaseActionPayload } from "@/types";
+
+// Define all payload types for each event.
+export type ArchivedPayload = CreatePayload<{ archived_at: string | null }>;
+export type UnarchivedPayload = BaseActionPayload;
+export type LockedPayload = CreatePayload<{ is_locked: boolean }>;
+export type UnlockedPayload = BaseActionPayload;
+export type MadePublicPayload = CreatePayload<{ access: EPageAccess }>;
+export type MadePrivatePayload = CreatePayload<{ access: EPageAccess }>;
+export type DeletedPayload = CreatePayload<{ deleted_at: Date | null }>;
+export type DuplicatedPayload = CreatePayload<{ new_page_id: string }>;
+export type PropertyUpdatedPayload = CreatePayload<Partial<TPage>>;
+export type MovedPayload = CreatePayload<{
+  new_project_id: string;
+  new_page_id: string;
+}>;
+export type RestoredPayload = CreatePayload<{ deleted_page_ids?: string[] }>;
+export type ErrorPayload = CreatePayload<{
+  error_message: string;
+  error_type: "fetch" | "store";
+  error_code?: "content_too_large" | "page_locked" | "page_archived";
+  should_disconnect?: boolean;
+}>;
+
+// Enhanced DocumentCollaborativeEvents with payload types.
+// Both the client name and server name are defined, and we add a "payloadType" property
+// so that we can later derive a mapping from client event to payload type.
+export const DocumentCollaborativeEvents = {
+  lock: {
+    client: "locked",
+    server: "lock",
+    payloadType: {} as LockedPayload,
+  },
+  unlock: {
+    client: "unlocked",
+    server: "unlock",
+    payloadType: {} as UnlockedPayload,
+  },
+  archive: {
+    client: "archived",
+    server: "archive",
+    payloadType: {} as ArchivedPayload,
+  },
+  unarchive: {
+    client: "unarchived",
+    server: "unarchive",
+    payloadType: {} as UnarchivedPayload,
+  },
+  "make-public": {
+    client: "made-public",
+    server: "make-public",
+    payloadType: {} as MadePublicPayload,
+  },
+  "make-private": {
+    client: "made-private",
+    server: "make-private",
+    payloadType: {} as MadePrivatePayload,
+  },
+  delete: {
+    client: "deleted",
+    server: "delete",
+    payloadType: {} as DeletedPayload,
+  },
+  move: {
+    client: "moved",
+    server: "move",
+    payloadType: {} as MovedPayload,
+  },
+  duplicate: {
+    client: "duplicated",
+    server: "duplicate",
+    payloadType: {} as DuplicatedPayload,
+  },
+  property_update: {
+    client: "property_updated",
+    server: "property_update",
+    payloadType: {} as PropertyUpdatedPayload,
+  },
+  restore: {
+    client: "restored",
+    server: "restore",
+    payloadType: {} as RestoredPayload,
+  },
+  error: {
+    client: "error",
+    server: "error",
+    payloadType: {} as ErrorPayload,
+  },
+} as const;

packages/editor/src/constants/extension.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum CORE_EXTENSIONS {
+  BLOCKQUOTE = "blockquote",
+  BOLD = "bold",
+  BULLET_LIST = "bulletList",
+  CALLOUT = "calloutComponent",
+  CHARACTER_COUNT = "characterCount",
+  CODE_BLOCK = "codeBlock",
+  CODE_INLINE = "code",
+  CUSTOM_COLOR = "customColor",
+  CUSTOM_IMAGE = "imageComponent",
+  CUSTOM_LINK = "link",
+  DOCUMENT = "doc",
+  DROP_CURSOR = "dropCursor",
+  ENTER_KEY = "enterKey",
+  GAP_CURSOR = "gapCursor",
+  HARD_BREAK = "hardBreak",
+  HEADING = "heading",
+  HEADINGS_LIST = "headingsList",
+  HISTORY = "history",
+  HORIZONTAL_RULE = "horizontalRule",
+  IMAGE = "image",
+  ITALIC = "italic",
+  LIST_ITEM = "listItem",
+  MARKDOWN_CLIPBOARD = "markdownClipboard",
+  MENTION = "mention",
+  ORDERED_LIST = "orderedList",
+  PARAGRAPH = "paragraph",
+  PLACEHOLDER = "placeholder",
+  SIDE_MENU = "editorSideMenu",
+  SLASH_COMMANDS = "slash-command",
+  STRIKETHROUGH = "strike",
+  TABLE = "table",
+  TABLE_CELL = "tableCell",
+  TABLE_HEADER = "tableHeader",
+  TABLE_ROW = "tableRow",
+  TASK_ITEM = "taskItem",
+  TASK_LIST = "taskList",
+  TEXT_ALIGN = "textAlign",
+  TEXT_STYLE = "textStyle",
+  TYPOGRAPHY = "typography",
+  UNDERLINE = "underline",
+  UTILITY = "utility",
+  WORK_ITEM_EMBED = "issue-embed-component",
+  EMOJI = "emoji",
+  UNIQUE_ID = "uniqueID",
+}
+
+export const BLOCK_NODE_TYPES = [
+  // Basic block nodes
+  CORE_EXTENSIONS.PARAGRAPH,
+  CORE_EXTENSIONS.HEADING,
+  CORE_EXTENSIONS.BLOCKQUOTE,
+  CORE_EXTENSIONS.CODE_BLOCK,
+  CORE_EXTENSIONS.HORIZONTAL_RULE,
+
+  // List nodes
+  CORE_EXTENSIONS.BULLET_LIST,
+  CORE_EXTENSIONS.ORDERED_LIST,
+  CORE_EXTENSIONS.LIST_ITEM,
+  CORE_EXTENSIONS.TASK_LIST,
+  CORE_EXTENSIONS.TASK_ITEM,
+
+  // Table nodes
+  CORE_EXTENSIONS.TABLE,
+
+  // Media and embed nodes
+  CORE_EXTENSIONS.IMAGE,
+  CORE_EXTENSIONS.CUSTOM_IMAGE,
+  CORE_EXTENSIONS.CALLOUT,
+  CORE_EXTENSIONS.WORK_ITEM_EMBED,
+];

packages/editor/src/constants/extensions.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ADDITIONAL_EXTENSIONS {}
+
+export const ADDITIONAL_BLOCK_NODE_TYPES = [];

packages/editor/src/constants/meta.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum CORE_EDITOR_META {
+  SKIP_FILE_DELETION = "skipFileDeletion",
+  INTENTIONAL_DELETION = "intentionalDeletion",
+  ADD_TO_HISTORY = "addToHistory",
+}

packages/editor/src/constants/utility.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { ADDITIONAL_EXTENSIONS } from "@plane/utils";
+import { CORE_EXTENSIONS } from "@plane/utils";
+// plane editor imports
+import type { ExtensionFileSetStorageKey } from "@/types/storage";
+
+export type NodeFileMapType = Partial<
+  Record<
+    CORE_EXTENSIONS | ADDITIONAL_EXTENSIONS,
+    {
+      fileSetName: ExtensionFileSetStorageKey;
+    }
+  >
+>;
+
+export const NODE_FILE_MAP: NodeFileMapType = {
+  [CORE_EXTENSIONS.IMAGE]: {
+    fileSetName: "deletedImageSet",
+  },
+  [CORE_EXTENSIONS.CUSTOM_IMAGE]: {
+    fileSetName: "deletedImageSet",
+  },
+};