@blocknote/core 0.13.0 → 0.13.3

package/src/i18n/locales/zh.ts

@@ -0,0 +1,312 @@
+import type { Dictionary } from "../dictionary";
+
+export const zh: Dictionary = {
+  slash_menu: {
+    heading: {
+      title: "一级标题",
+      subtext: "用于顶级标题",
+      aliases: ["h", "heading1", "h1", "标题", "一级标题"],
+      group: "标题",
+    },
+    heading_2: {
+      title: "二级标题",
+      subtext: "用于关键部分",
+      aliases: ["h2", "heading2", "subheading", "标题", "二级标题", "副标题"],
+      group: "标题",
+    },
+    heading_3: {
+      title: "三级标题",
+      subtext: "用于小节和分组标题",
+      aliases: ["h3", "heading3", "subheading", "标题", "三级标题"],
+      group: "标题",
+    },
+    numbered_list: {
+      title: "有序列表",
+      subtext: "用于显示有序列表",
+      aliases: [
+        "ol",
+        "li",
+        "list",
+        "numberedlist",
+        "numbered list",
+        "列表",
+        "有序列表",
+      ],
+      group: "基础",
+    },
+    bullet_list: {
+      title: "无序列表",
+      subtext: "用于显示无序列表",
+      aliases: [
+        "ul",
+        "li",
+        "list",
+        "bulletlist",
+        "bullet list",
+        "列表",
+        "无序列表",
+      ],
+      group: "基础",
+    },
+    paragraph: {
+      title: "段落",
+      subtext: "用于文档正文",
+      aliases: ["p", "paragraph", "text", "正文"],
+      group: "基础",
+    },
+    table: {
+      title: "表格",
+      subtext: "使用表格",
+      aliases: ["table", "表格"],
+      group: "高级功能",
+    },
+    image: {
+      title: "图片",
+      subtext: "插入图片",
+      aliases: [
+        "图片",
+        "上传图片",
+        "上传",
+        "image",
+        "img",
+        "相册",
+        "媒体",
+        "url",
+      ],
+      group: "媒体",
+    },
+    video: {
+      title: "视频",
+      subtext: "插入视频",
+      aliases: [
+        "视频",
+        "视频上传",
+        "上传",
+        "video",
+        "mp4",
+        "电影",
+        "媒体",
+        "url",
+        "驱动",
+        "dropbox",
+      ],
+      group: "媒体",
+    },
+    audio: {
+      title: "音频",
+      subtext: "插入音频",
+      aliases: [
+        "音频",
+        "音频上传",
+        "上传",
+        "audio",
+        "mp3",
+        "声音",
+        "媒体",
+        "url",
+        "驱动",
+        "dropbox",
+      ],
+      group: "媒体",
+    },
+    file: {
+      title: "文件",
+      subtext: "插入文件",
+      aliases: ["文件", "上传", "file", "嵌入", "媒体", "url"],
+      group: "媒体",
+    },
+  },
+  placeholders: {
+    default: "输入 '/' 以使用命令",
+    heading: "标题",
+    bulletListItem: "列表",
+    numberedListItem: "列表",
+  },
+  file_blocks: {
+    image: {
+      add_button_text: "添加图片",
+    },
+    video: {
+      add_button_text: "添加视频",
+    },
+    audio: {
+      add_button_text: "添加音频",
+    },
+    file: {
+      add_button_text: "添加文件",
+    },
+  },
+  // from react package:
+  side_menu: {
+    add_block_label: "添加块",
+    drag_handle_label: "打开菜单",
+  },
+  drag_handle: {
+    delete_menuitem: "删除",
+    colors_menuitem: "颜色",
+  },
+  table_handle: {
+    delete_column_menuitem: "删除列",
+    delete_row_menuitem: "删除行",
+    add_left_menuitem: "左侧添加列",
+    add_right_menuitem: "右侧添加列",
+    add_above_menuitem: "上方添加行",
+    add_below_menuitem: "下方添加行",
+  },
+  suggestion_menu: {
+    no_items_title: "无匹配项",
+    loading: "加载中…",
+  },
+  color_picker: {
+    text_title: "文本",
+    background_title: "背景色",
+    colors: {
+      default: "默认",
+      gray: "灰色",
+      brown: "棕色",
+      red: "红色",
+      orange: "橙色",
+      yellow: "黄色",
+      green: "绿色",
+      blue: "蓝色",
+      purple: "紫色",
+      pink: "粉色",
+    },
+  },
+
+  formatting_toolbar: {
+    bold: {
+      tooltip: "加粗",
+      secondary_tooltip: "Mod+B",
+    },
+    italic: {
+      tooltip: "斜体",
+      secondary_tooltip: "Mod+I",
+    },
+    underline: {
+      tooltip: "下划线",
+      secondary_tooltip: "Mod+U",
+    },
+    strike: {
+      tooltip: "删除线",
+      secondary_tooltip: "Mod+Shift+X",
+    },
+    code: {
+      tooltip: "代码标记",
+      secondary_tooltip: "",
+    },
+    colors: {
+      tooltip: "颜色",
+    },
+    link: {
+      tooltip: "添加链接",
+      secondary_tooltip: "Mod+K",
+    },
+    file_caption: {
+      tooltip: "编辑标题",
+      input_placeholder: "编辑标题",
+    },
+    file_replace: {
+      tooltip: {
+        image: "替换图片",
+        video: "替换视频",
+        audio: "替换音频",
+        file: "替换文件",
+      },
+    },
+    file_rename: {
+      tooltip: {
+        image: "重命名图片",
+        video: "重命名视频",
+        audio: "重命名音频",
+        file: "重命名文件",
+      },
+      input_placeholder: {
+        image: "重命名图片",
+        video: "重命名视频",
+        audio: "重命名音频",
+        file: "重命名文件",
+      },
+    },
+    file_download: {
+      tooltip: {
+        image: "下载图片",
+        video: "下载视频",
+        audio: "下载音频",
+        file: "下载文件",
+      },
+    },
+    file_delete: {
+      tooltip: {
+        image: "删除图片",
+        video: "删除视频",
+        audio: "删除音频",
+        file: "删除文件",
+      },
+    },
+    file_preview_toggle: {
+      tooltip: "切换预览",
+    },
+    nest: {
+      tooltip: "嵌套",
+      secondary_tooltip: "Tab",
+    },
+    unnest: {
+      tooltip: "取消嵌套",
+      secondary_tooltip: "Shift+Tab",
+    },
+    align_left: {
+      tooltip: "左对齐",
+    },
+    align_center: {
+      tooltip: "居中",
+    },
+    align_right: {
+      tooltip: "右对齐",
+    },
+    align_justify: {
+      tooltip: "文本对齐",
+    },
+  },
+  file_panel: {
+    upload: {
+      title: "上传",
+      file_placeholder: {
+        image: "上传图片",
+        video: "上传视频",
+        audio: "上传音频",
+        file: "上传文件",
+      },
+      upload_error: "Error：上传失败",
+    },
+    embed: {
+      title: "嵌入",
+      embed_button: {
+        image: "嵌入图片",
+        video: "嵌入视频",
+        audio: "嵌入音频",
+        file: "嵌入文件",
+      },
+      url_placeholder: "输入图片地址",
+    },
+  },
+  link_toolbar: {
+    delete: {
+      tooltip: "清除链接",
+    },
+    edit: {
+      text: "编辑链接",
+      tooltip: "编辑",
+    },
+    open: {
+      tooltip: "新窗口打开",
+    },
+    form: {
+      title_placeholder: "编辑标题",
+      url_placeholder: "编辑链接地址",
+    },
+  },
+  generic: {
+    ctrl_shortcut: "Ctrl",
+  },
+};

package/src/index.ts

@@ -2,7 +2,13 @@ import * as locales from "./i18n/locales";
 export * from "./api/exporters/html/externalHTMLExporter";
 export * from "./api/exporters/html/internalHTMLSerializer";
 export * from "./api/testUtil";
-export * from "./blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+export * from "./blocks/FileBlockContent/FileBlockContent";
+export * from "./blocks/ImageBlockContent/ImageBlockContent";
+export * from "./blocks/VideoBlockContent/VideoBlockContent";
+export * from "./blocks/AudioBlockContent/AudioBlockContent";
+
+export * from "./blocks/FileBlockContent/fileBlockHelpers";
+export * from "./blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 export * from "./blocks/defaultBlockTypeGuards";
 export * from "./blocks/defaultBlocks";
 export * from "./blocks/defaultProps";
@@ -11,8 +17,8 @@ export * from "./editor/BlockNoteExtensions";
 export * from "./editor/BlockNoteSchema";
 export * from "./editor/selectionTypes";
 export * from "./extensions-shared/UiElementPosition";
+export * from "./extensions/FilePanel/FilePanelPlugin";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
-export * from "./extensions/ImagePanel/ImageToolbarPlugin";
 export * from "./extensions/LinkToolbar/LinkToolbarPlugin";
 export * from "./extensions/SideMenu/SideMenuPlugin";
 export * from "./extensions/SuggestionMenu/DefaultSuggestionItem";
@@ -29,3 +35,4 @@ export * from "./extensions/UniqueID/UniqueID";
 export * from "./i18n/dictionary";
 export { UnreachableCaseError, assertEmpty } from "./util/typescript";
 export { locales };
+export { parseImageElement } from "./blocks/ImageBlockContent/imageBlockHelpers";

package/src/pm-nodes/BlockContainer.ts

@@ -139,7 +139,7 @@ export const BlockContainer = Node.create<{
             state.schema.nodes["blockContainer"].createAndFill()!;
 
           if (dispatch) {
-            state.tr.insert(pos, newBlock);
+            state.tr.insert(pos, newBlock).scrollIntoView();
           }
 
           return true;
@@ -470,6 +470,8 @@ export const BlockContainer = Node.create<{
                   )
                 : undefined
             );
+
+            state.tr.scrollIntoView();
           }
 
           return true;
@@ -689,7 +691,7 @@ export const BlockContainer = Node.create<{
         if (
           this.options.editor.formattingToolbar?.shown ||
           this.options.editor.linkToolbar?.shown ||
-          this.options.editor.imagePanel?.shown
+          this.options.editor.filePanel?.shown
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;
@@ -701,7 +703,7 @@ export const BlockContainer = Node.create<{
         if (
           this.options.editor.formattingToolbar?.shown ||
           this.options.editor.linkToolbar?.shown ||
-          this.options.editor.imagePanel?.shown
+          this.options.editor.filePanel?.shown
         ) {
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;

package/src/schema/blocks/createSpec.ts

@@ -193,6 +193,7 @@ export function createBlockSpec<
         block.type,
         block.props,
         blockConfig.propSchema,
+        blockConfig.isFileBlock,
         blockContentDOMAttributes
       );
     },

package/src/schema/blocks/internal.ts

@@ -109,6 +109,11 @@ export function getBlockFromPos<
   const blockContainer = tipTapEditor.state.doc.resolve(pos!).node();
   // Gets block identifier
   const blockIdentifier = blockContainer.attrs.id;
+
+  if (!blockIdentifier) {
+    throw new Error("Block doesn't have id");
+  }
+
   // Gets the block
   const block = editor.getBlock(blockIdentifier)! as SpecificBlock<
     BSchema,
@@ -139,6 +144,7 @@ export function wrapInBlockStructure<
   blockType: BType,
   blockProps: Props<PSchema>,
   propSchema: PSchema,
+  isFileBlock = false,
   domAttributes?: Record<string, string>
 ): {
   dom: HTMLElement;
@@ -171,6 +177,10 @@ export function wrapInBlockStructure<
       blockContent.setAttribute(camelToDataKebab(prop), value);
     }
   }
+  // Adds file block attribute
+  if (isFileBlock) {
+    blockContent.setAttribute("data-file-block", "");
+  }
 
   blockContent.appendChild(element.dom);
 

package/src/schema/blocks/types.ts

@@ -21,14 +21,50 @@ export type BlockNoteDOMAttributes = Partial<{
   [DOMElement in BlockNoteDOMElement]: Record<string, string>;
 }>;
 
-// BlockConfig contains the "schema" info about a Block type
-// i.e. what props it supports, what content it supports, etc.
-export type BlockConfig = {
+export type FileBlockConfig = {
   type: string;
-  readonly propSchema: PropSchema;
-  content: "inline" | "none" | "table";
+  readonly propSchema: PropSchema & {
+    caption: {
+      default: "";
+    };
+    name: {
+      default: "";
+    };
+
+    // URL is optional, as we also want to accept files with no URL, but for example ids
+    // (ids can be used for files that are resolved on the backend)
+    url?: {
+      default: "";
+    };
+
+    // Whether to show the file preview or the name only.
+    // This is useful for some file blocks, but not all
+    // (e.g.: not relevant for default "file" block which doesn;'t show previews)
+    showPreview?: {
+      default: boolean;
+    };
+    // File preview width in px.
+    previewWidth?: {
+      default: number;
+    };
+  };
+  content: "none";
+  isFileBlock: true;
+  isFileBlockPlaceholder: (block: any) => boolean;
+  fileBlockAcceptMimeTypes?: string[];
 };
 
+// BlockConfig contains the "schema" info about a Block type
+// i.e. what props it supports, what content it supports, etc.
+export type BlockConfig =
+  | {
+      type: string;
+      readonly propSchema: PropSchema;
+      content: "inline" | "none" | "table";
+      isFileBlock?: false;
+    }
+  | FileBlockConfig;
+
 // Block implementation contains the "implementation" info about a Block
 // such as the functions / Nodes required to render and / or serialize it
 export type TiptapBlockImplementation<

package/src/util/string.ts

@@ -1,3 +1,15 @@
 export function camelToDataKebab(str: string): string {
   return "data-" + str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
+
+export function filenameFromURL(url: string): string {
+  const parts = url.split("/");
+  if (
+    !parts.length || // invalid?
+    parts[parts.length - 1] === "" // for example, URL ends in a directory-like trailing slash
+  ) {
+    // in this case just return the original url
+    return url;
+  }
+  return parts[parts.length - 1];
+}