mardora 1.2.0

package/src/editor/selection-toolbar/i18n.ts

@@ -0,0 +1,164 @@
+import type { MardoraLocale } from "../i18n";
+import type { SelectionToolbarBlockType } from "./types";
+
+export type SelectionToolbarMessages = {
+  buttons: {
+    blockType: string;
+    bold: string;
+    italic: string;
+    strike: string;
+    underline: string;
+    code: string;
+    highlight: string;
+    color: string;
+    link: string;
+    orderedList: string;
+    unorderedList: string;
+    taskList: string;
+  };
+  panels: {
+    textColor: string;
+    highlightColor: string;
+  };
+  link: {
+    title: string;
+    url: string;
+    copy: string;
+    copied: string;
+    open: string;
+    remove: string;
+    invalid: string;
+  };
+  blockTypes: Record<SelectionToolbarBlockType, string>;
+  colors: {
+    defaultText: string;
+    gray: string;
+    red: string;
+    orange: string;
+    yellow: string;
+    green: string;
+    blue: string;
+    purple: string;
+    defaultHighlight: string;
+    yellowHighlight: string;
+    greenHighlight: string;
+    blueHighlight: string;
+    pinkHighlight: string;
+    purpleHighlight: string;
+  };
+};
+
+const selectionToolbarMessages: Record<MardoraLocale, SelectionToolbarMessages> = {
+  "zh-CN": {
+    buttons: {
+      blockType: "块类型",
+      bold: "加粗",
+      italic: "斜体",
+      strike: "删除线",
+      underline: "下划线",
+      code: "行内代码",
+      highlight: "高亮",
+      color: "文字颜色",
+      link: "链接",
+      orderedList: "有序列表",
+      unorderedList: "无序列表",
+      taskList: "任务列表",
+    },
+    panels: {
+      textColor: "文字颜色",
+      highlightColor: "高亮颜色",
+    },
+    link: {
+      title: "链接标题",
+      url: "链接 URL",
+      copy: "复制链接",
+      copied: "已复制",
+      open: "打开链接",
+      remove: "移除链接",
+      invalid: "请输入有效链接",
+    },
+    blockTypes: {
+      text: "文本",
+      "heading-1": "标题 1",
+      "heading-2": "标题 2",
+      "heading-3": "标题 3",
+      "heading-4": "标题 4",
+      "heading-5": "标题 5",
+      "heading-6": "标题 6",
+    },
+    colors: {
+      defaultText: "默认文字颜色",
+      gray: "灰色",
+      red: "红色",
+      orange: "橙色",
+      yellow: "黄色",
+      green: "绿色",
+      blue: "蓝色",
+      purple: "紫色",
+      defaultHighlight: "默认高亮",
+      yellowHighlight: "黄色高亮",
+      greenHighlight: "绿色高亮",
+      blueHighlight: "蓝色高亮",
+      pinkHighlight: "粉色高亮",
+      purpleHighlight: "紫色高亮",
+    },
+  },
+  "en-US": {
+    buttons: {
+      blockType: "Block type",
+      bold: "Bold",
+      italic: "Italic",
+      strike: "Strikethrough",
+      underline: "Underline",
+      code: "Inline code",
+      highlight: "Highlight",
+      color: "Text color",
+      link: "Link",
+      orderedList: "Numbered list",
+      unorderedList: "Bulleted list",
+      taskList: "To-do list",
+    },
+    panels: {
+      textColor: "Text color",
+      highlightColor: "Highlight color",
+    },
+    link: {
+      title: "Link title",
+      url: "Link URL",
+      copy: "Copy link",
+      copied: "Copied",
+      open: "Open link",
+      remove: "Remove link",
+      invalid: "Enter a valid link",
+    },
+    blockTypes: {
+      text: "Text",
+      "heading-1": "Heading 1",
+      "heading-2": "Heading 2",
+      "heading-3": "Heading 3",
+      "heading-4": "Heading 4",
+      "heading-5": "Heading 5",
+      "heading-6": "Heading 6",
+    },
+    colors: {
+      defaultText: "Default text color",
+      gray: "Gray",
+      red: "Red",
+      orange: "Orange",
+      yellow: "Yellow",
+      green: "Green",
+      blue: "Blue",
+      purple: "Purple",
+      defaultHighlight: "Default highlight",
+      yellowHighlight: "Yellow highlight",
+      greenHighlight: "Green highlight",
+      blueHighlight: "Blue highlight",
+      pinkHighlight: "Pink highlight",
+      purpleHighlight: "Purple highlight",
+    },
+  },
+};
+
+export function getSelectionToolbarMessages(locale: MardoraLocale): SelectionToolbarMessages {
+  return selectionToolbarMessages[locale];
+}

package/src/editor/selection-toolbar/index.ts

@@ -0,0 +1,7 @@
+export * from "./types";
+export * from "./position";
+export * from "./commands";
+export * from "./menu";
+export * from "./theme";
+export * from "./i18n";
+export * from "./extension";

package/src/editor/selection-toolbar/menu.ts

@@ -0,0 +1,252 @@
+import { createMardoraIcon } from "../icons";
+import type {
+  SelectionToolbarBlockType,
+  SelectionToolbarButton,
+  SelectionToolbarMenuCallbacks,
+  SelectionToolbarMenuState,
+  SelectionToolbarPaletteItem,
+} from "./types";
+
+function iconButton(button: SelectionToolbarButton, callbacks: SelectionToolbarMenuCallbacks): HTMLButtonElement {
+  const element = document.createElement("button");
+  element.type = "button";
+  element.className = button.active
+    ? "cm-mardora-selection-toolbar-button cm-mardora-selection-toolbar-button-active"
+    : "cm-mardora-selection-toolbar-button";
+  element.setAttribute("aria-label", button.label);
+  element.setAttribute("aria-pressed", String(!!button.active));
+  element.dataset.mardoraSelectionAction = button.id;
+  element.addEventListener("mousedown", (event) => {
+    event.preventDefault();
+    callbacks.onAction(button.id);
+  });
+
+  if (button.text) {
+    element.classList.add("cm-mardora-selection-toolbar-block-button");
+    const label = document.createElement("span");
+    label.className = "cm-mardora-selection-toolbar-button-text";
+    label.textContent = button.text;
+    element.appendChild(label);
+  } else if (button.id === "block-type") {
+    element.classList.add("cm-mardora-selection-toolbar-block-button");
+    const icon = createMardoraIcon(button.icon);
+    if (icon) element.appendChild(icon);
+  } else {
+    const icon = createMardoraIcon(button.icon);
+    if (icon) {
+      element.appendChild(icon);
+    } else {
+      element.textContent = button.label;
+    }
+  }
+  return element;
+}
+
+function blockTypeIcon(type: SelectionToolbarBlockType): HTMLElement {
+  const icon = document.createElement("span");
+  icon.className = "cm-mardora-selection-toolbar-block-menu-icon";
+  if (type === "text") {
+    const svg = createMardoraIcon("text-align-start");
+    if (svg) icon.appendChild(svg);
+  } else {
+    icon.textContent = `H${type.slice("heading-".length)}`;
+  }
+  return icon;
+}
+
+function appendBlockTypePanel(
+  root: HTMLElement,
+  state: SelectionToolbarMenuState,
+  callbacks: SelectionToolbarMenuCallbacks
+): void {
+  const list = document.createElement("div");
+  list.className = "cm-mardora-selection-toolbar-block-menu";
+  list.setAttribute("role", "menu");
+
+  for (const item of state.blockTypes) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className =
+      item.type === state.blockType
+        ? "cm-mardora-selection-toolbar-block-item cm-mardora-selection-toolbar-block-item-active"
+        : "cm-mardora-selection-toolbar-block-item";
+    button.setAttribute("aria-label", item.label);
+    button.setAttribute("aria-pressed", String(item.type === state.blockType));
+    button.setAttribute("role", "menuitemradio");
+    button.dataset.mardoraBlockType = item.type;
+    button.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      callbacks.onBlockType(item.type);
+    });
+
+    const label = document.createElement("span");
+    label.className = "cm-mardora-selection-toolbar-block-menu-label";
+    label.textContent = item.label;
+
+    button.append(blockTypeIcon(item.type), label);
+    list.appendChild(button);
+  }
+
+  root.appendChild(list);
+}
+
+function divider(): HTMLSpanElement {
+  const element = document.createElement("span");
+  element.className = "cm-mardora-selection-toolbar-divider";
+  element.setAttribute("aria-hidden", "true");
+  return element;
+}
+
+function appendToolbarButtons(
+  root: HTMLElement,
+  buttons: SelectionToolbarButton[],
+  callbacks: SelectionToolbarMenuCallbacks
+): void {
+  const groups: SelectionToolbarButton[][] = [buttons.slice(0, 1), buttons.slice(1, 8), buttons.slice(8, 9), buttons.slice(9)];
+
+  groups.forEach((group, index) => {
+    if (group.length === 0) return;
+    if (index > 0) root.appendChild(divider());
+    for (const button of group) root.appendChild(iconButton(button, callbacks));
+  });
+}
+
+function paletteButton(
+  item: SelectionToolbarPaletteItem,
+  className: string,
+  callback: (value: string | null) => void
+): HTMLButtonElement {
+  const element = document.createElement("button");
+  element.type = "button";
+  element.className = className;
+  element.setAttribute("aria-label", item.label);
+  element.title = item.label;
+  element.dataset.mardoraSwatch = item.id;
+  if (item.value) element.style.setProperty("--mardora-swatch-color", item.value);
+  element.addEventListener("mousedown", (event) => {
+    event.preventDefault();
+    callback(item.value);
+  });
+  return element;
+}
+
+function appendPalette(
+  root: HTMLElement,
+  title: string,
+  items: SelectionToolbarPaletteItem[],
+  callback: (value: string | null) => void
+): void {
+  const group = document.createElement("div");
+  group.className = "cm-mardora-selection-toolbar-palette-group";
+
+  const label = document.createElement("div");
+  label.className = "cm-mardora-selection-toolbar-palette-label";
+  label.textContent = title;
+  group.appendChild(label);
+
+  const grid = document.createElement("div");
+  grid.className = "cm-mardora-selection-toolbar-swatch-grid";
+  for (const item of items) {
+    grid.appendChild(paletteButton(item, "cm-mardora-selection-toolbar-swatch", callback));
+  }
+  group.appendChild(grid);
+  root.appendChild(group);
+}
+
+function appendLinkAction(
+  actions: HTMLElement,
+  label: string,
+  iconName: string,
+  callback: () => void,
+  danger = false
+): void {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = danger
+    ? "cm-mardora-selection-toolbar-link-button cm-mardora-selection-toolbar-link-button-danger"
+    : "cm-mardora-selection-toolbar-link-button";
+  button.setAttribute("aria-label", label);
+  const svg = createMardoraIcon(iconName);
+  if (svg) button.appendChild(svg);
+  button.addEventListener("mousedown", (event) => {
+    event.preventDefault();
+    callback();
+  });
+  actions.appendChild(button);
+}
+
+function appendLinkPanel(
+  root: HTMLElement,
+  state: SelectionToolbarMenuState,
+  callbacks: SelectionToolbarMenuCallbacks
+): void {
+  const title = document.createElement("input");
+  title.className = "cm-mardora-selection-toolbar-link-input";
+  title.setAttribute("aria-label", state.messages.link.title);
+  title.value = state.link.title;
+  title.addEventListener("input", () => callbacks.onLinkInput("title", title.value));
+  title.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") callbacks.onLinkSubmit();
+    if (event.key === "Escape") callbacks.onCancelPanel();
+  });
+
+  const url = document.createElement("input");
+  url.className = "cm-mardora-selection-toolbar-link-input";
+  url.setAttribute("aria-label", state.messages.link.url);
+  url.value = state.link.url;
+  url.addEventListener("input", () => callbacks.onLinkInput("url", url.value));
+  url.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") callbacks.onLinkSubmit();
+    if (event.key === "Escape") callbacks.onCancelPanel();
+  });
+
+  const actions = document.createElement("div");
+  actions.className = "cm-mardora-selection-toolbar-link-actions";
+
+  appendLinkAction(actions, state.link.copied ? state.messages.link.copied : state.messages.link.copy, "copy", callbacks.onLinkCopy);
+  appendLinkAction(actions, state.messages.link.open, "external-link", callbacks.onLinkOpen);
+  if (state.link.canRemove) appendLinkAction(actions, state.messages.link.remove, "trash-2", callbacks.onLinkRemove, true);
+
+  root.append(title, url);
+  if (state.link.error) {
+    const error = document.createElement("div");
+    error.className = "cm-mardora-selection-toolbar-error";
+    error.textContent = state.link.error;
+    root.appendChild(error);
+  }
+  root.appendChild(actions);
+  queueMicrotask(() => {
+    title.focus();
+    title.select();
+  });
+}
+
+export function createSelectionToolbarElement(
+  state: SelectionToolbarMenuState,
+  callbacks: SelectionToolbarMenuCallbacks
+): HTMLElement {
+  const root = document.createElement("div");
+  root.className =
+    state.panel === "toolbar" || state.panel === "block-type"
+      ? "cm-mardora-selection-toolbar"
+      : "cm-mardora-selection-toolbar cm-mardora-selection-toolbar-panel";
+  root.setAttribute("role", "toolbar");
+  root.addEventListener("mousedown", (event) => {
+    const target = event.target;
+    if (target instanceof HTMLElement && target.closest(".cm-mardora-selection-toolbar-link-input")) return;
+    event.preventDefault();
+  });
+
+  if (state.panel === "toolbar" || state.panel === "block-type") {
+    appendToolbarButtons(root, state.buttons, callbacks);
+    if (state.panel === "block-type") appendBlockTypePanel(root, state, callbacks);
+  } else if (state.panel === "link") {
+    appendLinkPanel(root, state, callbacks);
+  } else if (state.panel === "color") {
+    appendPalette(root, state.messages.panels.textColor, state.textColors, callbacks.onColor);
+  } else {
+    appendPalette(root, state.messages.panels.highlightColor, state.highlightColors, callbacks.onHighlight);
+  }
+
+  return root;
+}

package/src/editor/selection-toolbar/position.ts

@@ -0,0 +1,43 @@
+import type { SelectionToolbarLayout, SelectionToolbarLayoutInput, SelectionToolbarPlacement } from "./types";
+
+const viewportPadding = 8;
+const anchorGap = 8;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function computeSelectionToolbarLayout(input: SelectionToolbarLayoutInput): SelectionToolbarLayout {
+  const selectionCenter = (input.anchor.left + input.anchor.right) / 2;
+  const boundary = input.boundary ?? {
+    left: viewportPadding,
+    right: input.viewport.width - viewportPadding,
+    top: viewportPadding,
+    bottom: input.viewport.height - viewportPadding,
+  };
+  const minLeft = Math.max(viewportPadding, boundary.left);
+  const maxLeft = Math.max(minLeft, Math.min(input.viewport.width - input.floating.width - viewportPadding, boundary.right - input.floating.width));
+  const left = clamp(Math.round(selectionCenter - input.floating.width / 2), minLeft, maxLeft);
+  const topLimit = Math.max(viewportPadding, boundary.top);
+  const bottomLimit = Math.min(input.viewport.height - viewportPadding, boundary.bottom);
+  const availableAbove = Math.max(1, input.anchor.top - anchorGap - topLimit);
+  const availableBelow = Math.max(1, bottomLimit - input.anchor.bottom - anchorGap);
+  const placement: SelectionToolbarPlacement =
+    availableAbove >= input.floating.height || availableAbove >= availableBelow ? "top" : "bottom";
+
+  if (placement === "top") {
+    return {
+      placement,
+      left,
+      top: Math.max(topLimit, Math.round(input.anchor.top - anchorGap - input.floating.height)),
+      maxHeight: availableAbove,
+    };
+  }
+
+  return {
+    placement,
+    left,
+    top: Math.round(input.anchor.bottom + anchorGap),
+    maxHeight: availableBelow,
+  };
+}

package/src/editor/selection-toolbar/theme.ts

@@ -0,0 +1,195 @@
+import { EditorView } from "@codemirror/view";
+
+export const selectionToolbarTheme = EditorView.baseTheme({
+  ".cm-mardora-selection-toolbar": {
+    position: "fixed",
+    zIndex: "1001",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "2px",
+    border: "1px solid rgba(24, 24, 27, 0.14)",
+    borderRadius: "10px",
+    background: "var(--mardora-selection-toolbar-bg, #ffffff)",
+    boxShadow: "0 14px 38px rgba(15, 23, 42, 0.16)",
+    padding: "4px",
+    color: "var(--mardora-selection-toolbar-fg, #18181b)",
+    fontFamily: "var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)",
+    userSelect: "none",
+  },
+  ".cm-mardora-selection-toolbar-panel": {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    width: "336px",
+    gap: "6px",
+    padding: "8px",
+  },
+  ".cm-mardora-selection-toolbar-block-button": {
+    minWidth: "44px",
+    width: "44px",
+    fontWeight: "400",
+  },
+  ".cm-mardora-selection-toolbar-button-text": {
+    fontSize: "13px",
+    lineHeight: "1",
+  },
+  ".cm-mardora-selection-toolbar-button, .cm-mardora-selection-toolbar-link-button": {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "30px",
+    height: "30px",
+    border: "0",
+    borderRadius: "7px",
+    background: "transparent",
+    color: "inherit",
+    cursor: "default",
+    padding: "0",
+  },
+  ".cm-mardora-selection-toolbar-button:hover, .cm-mardora-selection-toolbar-button-active": {
+    background: "var(--mardora-selection-toolbar-active, #f4f4f5)",
+  },
+  ".cm-mardora-selection-toolbar-button svg, .cm-mardora-selection-toolbar-link-button svg": {
+    width: "16px",
+    height: "16px",
+    strokeWidth: "2",
+  },
+  ".cm-mardora-selection-toolbar-divider": {
+    width: "1px",
+    height: "22px",
+    margin: "0 4px",
+    background: "var(--mardora-selection-toolbar-border, #e4e4e7)",
+  },
+  ".cm-mardora-selection-toolbar-block-menu": {
+    position: "absolute",
+    left: "0",
+    zIndex: "1002",
+    display: "flex",
+    flexDirection: "column",
+    gap: "1px",
+    boxSizing: "border-box",
+    width: "168px",
+    maxHeight: "var(--mardora-selection-toolbar-popover-max-height, 240px)",
+    overflowY: "auto",
+    border: "1px solid rgba(24, 24, 27, 0.14)",
+    borderRadius: "8px",
+    background: "var(--mardora-selection-toolbar-bg, #ffffff)",
+    boxShadow: "0 12px 28px rgba(15, 23, 42, 0.14)",
+    padding: "5px",
+  },
+  '.cm-mardora-selection-toolbar[data-mardora-selection-placement="bottom"] .cm-mardora-selection-toolbar-block-menu': {
+    top: "calc(100% + 6px)",
+  },
+  '.cm-mardora-selection-toolbar[data-mardora-selection-placement="top"] .cm-mardora-selection-toolbar-block-menu': {
+    bottom: "calc(100% + 6px)",
+  },
+  ".cm-mardora-selection-toolbar-block-item": {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    border: "0",
+    borderRadius: "6px",
+    background: "transparent",
+    color: "inherit",
+    cursor: "default",
+    font: "inherit",
+    minHeight: "28px",
+    padding: "4px 8px",
+    textAlign: "left",
+  },
+  ".cm-mardora-selection-toolbar-block-item:hover, .cm-mardora-selection-toolbar-block-item-active": {
+    background: "var(--mardora-selection-toolbar-active, #f4f4f5)",
+  },
+  ".cm-mardora-selection-toolbar-block-menu-icon": {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "22px",
+    color: "inherit",
+    fontSize: "12px",
+    fontWeight: "400",
+    lineHeight: "1",
+  },
+  ".cm-mardora-selection-toolbar-block-menu-label": {
+    fontSize: "13px",
+    lineHeight: "1.1",
+  },
+  ".cm-mardora-selection-toolbar-link-input": {
+    boxSizing: "border-box",
+    width: "100%",
+    border: "0",
+    borderRadius: "7px",
+    background: "var(--mardora-selection-toolbar-input, #f4f4f5)",
+    color: "inherit",
+    font: "inherit",
+    fontSize: "14px",
+    outline: "none",
+    padding: "8px 10px",
+  },
+  ".cm-mardora-selection-toolbar-link-actions": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "6px",
+  },
+  ".cm-mardora-selection-toolbar-link-button:hover": {
+    background: "var(--mardora-selection-toolbar-active, #f4f4f5)",
+  },
+  ".cm-mardora-selection-toolbar-link-button-danger": {
+    color: "var(--mardora-selection-toolbar-danger, #dc2626)",
+  },
+  ".cm-mardora-selection-toolbar-link-button-danger:hover": {
+    background: "var(--mardora-selection-toolbar-danger-bg, #fee2e2)",
+  },
+  ".cm-mardora-selection-toolbar-error": {
+    color: "var(--mardora-selection-toolbar-danger, #dc2626)",
+    fontSize: "12px",
+    padding: "0 2px",
+  },
+  ".cm-mardora-selection-toolbar-palette-label": {
+    color: "var(--mardora-selection-toolbar-muted, #71717a)",
+    fontSize: "12px",
+    padding: "0 2px 4px",
+  },
+  ".cm-mardora-selection-toolbar-swatch-grid": {
+    display: "grid",
+    gridTemplateColumns: "repeat(8, 24px)",
+    gap: "6px",
+  },
+  ".cm-mardora-selection-toolbar-swatch": {
+    width: "24px",
+    height: "24px",
+    border: "1px solid var(--mardora-selection-toolbar-border, #e4e4e7)",
+    borderRadius: "6px",
+    background: "var(--mardora-swatch-color, transparent)",
+    boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.72)",
+    cursor: "default",
+    outline: "none",
+    padding: "0",
+    transition: "border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease",
+  },
+  ".cm-mardora-selection-toolbar-swatch:hover": {
+    borderColor: "var(--mardora-selection-toolbar-swatch-hover-border, #a1a1aa)",
+    boxShadow:
+      "0 0 0 3px var(--mardora-selection-toolbar-swatch-hover-ring, rgba(24, 24, 27, 0.08)), inset 0 0 0 1px rgba(255, 255, 255, 0.72)",
+    transform: "translateY(-1px)",
+  },
+  ".cm-mardora-selection-toolbar-swatch:focus-visible": {
+    borderColor: "var(--mardora-selection-toolbar-swatch-hover-border, #71717a)",
+    boxShadow:
+      "0 0 0 3px var(--mardora-selection-toolbar-swatch-hover-ring, rgba(24, 24, 27, 0.12)), inset 0 0 0 1px rgba(255, 255, 255, 0.72)",
+  },
+  "&dark .cm-mardora-selection-toolbar": {
+    "--mardora-selection-toolbar-bg": "#18181b",
+    "--mardora-selection-toolbar-fg": "#f4f4f5",
+    "--mardora-selection-toolbar-active": "#27272a",
+    "--mardora-selection-toolbar-border": "#3f3f46",
+    "--mardora-selection-toolbar-input": "#27272a",
+    "--mardora-selection-toolbar-muted": "#a1a1aa",
+    "--mardora-selection-toolbar-link": "#60a5fa",
+    "--mardora-selection-toolbar-danger": "#f87171",
+    "--mardora-selection-toolbar-danger-bg": "rgba(248, 113, 113, 0.18)",
+    "--mardora-selection-toolbar-swatch-hover-border": "#71717a",
+    "--mardora-selection-toolbar-swatch-hover-ring": "rgba(244, 244, 245, 0.12)",
+  },
+});