🚚(docs-package) move Divider in docs package

Move the Divider custom block to the common package.
It will be needed in multiple places, Docs app and
the y-provider server.

src/frontend/Dockerfile

@@ -11,12 +11,14 @@ COPY ./src/frontend/package.json ./package.json
 COPY ./src/frontend/yarn.lock ./yarn.lock
 COPY ./src/frontend/apps/impress/package.json ./apps/impress/package.json
 COPY ./src/frontend/packages/eslint-config-impress/package.json ./packages/eslint-config-impress/package.json
+COPY ./src/frontend/packages/common/package.json ./packages/common/package.json
 
 RUN yarn install --frozen-lockfile
 
 COPY .dockerignore ./.dockerignore
 COPY ./src/frontend/.prettierrc.js ./.prettierrc.js
 COPY ./src/frontend/packages/eslint-config-impress ./packages/eslint-config-impress
+COPY ./src/frontend/packages/common ./packages/common
 COPY ./src/frontend/apps/impress ./apps/impress
 
 ### ---- Front-end builder image ----

src/frontend/apps/impress/next.config.js

@@ -8,6 +8,7 @@ const buildId = crypto.randomBytes(256).toString('hex').slice(0, 8);
 const nextConfig = {
   output: 'export',
   trailingSlash: true,
+  transpilePackages: ['package-docs'],
   images: {
     unoptimized: true,
   },

src/frontend/apps/impress/package.json

@@ -47,6 +47,7 @@
     "lodash": "4.17.21",
     "luxon": "3.7.1",
     "next": "15.4.6",
+    "package-docs": "*",
     "posthog-js": "1.258.6",
     "react": "*",
     "react-aria-components": "1.11.0",

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -11,6 +11,7 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
+import { createDividerBlock } from 'package-docs';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
@@ -33,7 +34,7 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import { CalloutBlock } from './custom-blocks';
 import {
   InterlinkingLinkInlineContent,
   InterlinkingSearchInlineContent,
@@ -49,7 +50,9 @@ const baseBlockNoteSchema = withPageBreak(
     blockSpecs: {
       ...defaultBlockSpecs,
       callout: CalloutBlock,
-      divider: DividerBlock,
+      divider: createDividerBlock({
+        color: 'var(--c--theme--colors--greyscale-300)',
+      }),
     },
     inlineContentSpecs: {
       ...defaultInlineContentSpecs,

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx

@@ -6,19 +6,19 @@ import {
   useBlockNoteEditor,
   useDictionary,
 } from '@blocknote/react';
+import { getDividerReactSlashMenuItems } from 'package-docs';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Icon } from '@/components';
+
 import {
   DocsBlockSchema,
   DocsInlineContentSchema,
   DocsStyleSchema,
 } from '../types';
 
-import {
-  getCalloutReactSlashMenuItems,
-  getDividerReactSlashMenuItems,
-} from './custom-blocks';
+import { getCalloutReactSlashMenuItems } from './custom-blocks';
 import { useGetInterlinkingMenuItems } from './custom-inline-content';
 import XLMultiColumn from './xl-multi-column';
 
@@ -55,7 +55,12 @@ export const BlockNoteSuggestionMenu = () => {
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getMultiColumnSlashMenuItems?.(editor) || [],
             getPageBreakReactSlashMenuItems(editor),
-            getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getDividerReactSlashMenuItems(
+              editor,
+              t,
+              basicBlocksName,
+              <Icon iconName="remove" $size="18px" />,
+            ),
           ),
           query,
         ),

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DividerBlock.tsx

@@ -1,51 +0,0 @@
-import { insertOrUpdateBlock } from '@blocknote/core';
-import { createReactBlockSpec } from '@blocknote/react';
-import { TFunction } from 'i18next';
-
-import { Box, Icon } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-import { DocsBlockNoteEditor } from '../../types';
-
-export const DividerBlock = createReactBlockSpec(
-  {
-    type: 'divider',
-    propSchema: {},
-    content: 'none',
-  },
-  {
-    render: () => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const { colorsTokens } = useCunninghamTheme();
-
-      return (
-        <Box
-          as="hr"
-          $width="100%"
-          $background={colorsTokens['greyscale-300']}
-          $margin="1rem 0"
-          $css={`border: 1px solid ${colorsTokens['greyscale-300']};`}
-        />
-      );
-    },
-  },
-);
-
-export const getDividerReactSlashMenuItems = (
-  editor: DocsBlockNoteEditor,
-  t: TFunction<'translation', undefined>,
-  group: string,
-) => [
-  {
-    title: t('Divider'),
-    onItemClick: () => {
-      insertOrUpdateBlock(editor, {
-        type: 'divider',
-      });
-    },
-    aliases: ['divider', 'hr', 'horizontal rule', 'line', 'separator'],
-    group,
-    icon: <Icon iconName="remove" $size="18px" />,
-    subtext: t('Add a horizontal line'),
-  },
-];

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts

@@ -1,2 +1 @@
 export * from './CalloutBlock';
-export * from './DividerBlock';

src/frontend/package.json

@@ -13,6 +13,7 @@
     "APP_IMPRESS": "yarn workspace app-impress",
     "APP_E2E": "yarn workspace app-e2e",
     "I18N": "yarn workspace packages-i18n",
+    "COMMON": "yarn workspace package-docs",
     "COLLABORATION_SERVER": "yarn workspace server-y-provider",
     "app:dev": "yarn APP_IMPRESS run dev",
     "app:start": "yarn APP_IMPRESS run start",
@@ -20,7 +21,7 @@
     "app:test": "yarn APP_IMPRESS run test",
     "ci:build": "yarn APP_IMPRESS run build:ci",
     "e2e:test": "yarn APP_E2E run test",
-    "lint": "yarn APP_IMPRESS run lint && yarn APP_E2E run lint && yarn workspace eslint-config-impress run lint && yarn I18N run lint && yarn COLLABORATION_SERVER run lint",
+    "lint": "yarn APP_IMPRESS run lint && yarn APP_E2E run lint && yarn workspace eslint-config-impress run lint && yarn I18N run lint && yarn COMMON run lint && yarn COLLABORATION_SERVER run lint",
     "i18n:extract": "yarn I18N run extract-translation",
     "i18n:deploy": "yarn I18N run format-deploy && yarn APP_IMPRESS prettier",
     "i18n:test": "yarn I18N run test",

src/frontend/packages/common/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  extends: ['impress/next'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 'latest',
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  rules: {
+    '@next/next/no-html-link-for-pages': 'off',
+  },
+  ignorePatterns: ['node_modules'],
+};

src/frontend/packages/common/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "package-docs",
+  "version": "3.5.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint --ext .ts,.tsx src/"
+  },
+  "peerDependencies": {
+    "@blocknote/core": "0.35.0",
+    "@blocknote/react": "0.35.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
+  },
+  "devDependencies": {
+    "eslint-config-impress": "*",
+    "typescript": "*"
+  }
+}

src/frontend/packages/common/src/custom-blocks/DividerBlock.tsx

@@ -0,0 +1,52 @@
+import { BlockNoteEditor, insertOrUpdateBlock } from '@blocknote/core';
+import { createReactBlockSpec } from '@blocknote/react';
+import { TFunction } from 'i18next';
+
+interface DividerBlockProps {
+  color?: string;
+}
+
+export const createDividerBlock = ({ color }: DividerBlockProps) => {
+  return createReactBlockSpec(
+    {
+      type: 'divider',
+      propSchema: {},
+      content: 'none',
+    },
+    {
+      render: () => {
+        return (
+          <hr
+            style={{
+              width: '100%',
+              background: color,
+              margin: '1rem 0',
+              border: `1px solid ${color}`,
+            }}
+          />
+        );
+      },
+    },
+  );
+};
+
+export const getDividerReactSlashMenuItems = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editor: BlockNoteEditor<any, any, any>,
+  t: TFunction<'translation', undefined>,
+  group: string,
+  icon: React.ReactNode,
+) => [
+  {
+    title: t('Divider'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'divider',
+      });
+    },
+    aliases: ['divider', 'hr', 'horizontal rule', 'line', 'separator'],
+    group,
+    icon,
+    subtext: t('Add a horizontal line'),
+  },
+];

src/frontend/packages/common/src/custom-blocks/index.ts

@@ -0,0 +1 @@
+export * from './DividerBlock';

src/frontend/packages/common/src/index.ts

@@ -0,0 +1 @@
+export * from './custom-blocks/';

src/frontend/packages/common/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

src/frontend/yarn.lock

@@ -15113,3 +15113,5 @@ zwitch@^2.0.0, zwitch@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
   integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
+
+# Force cache refresh for packages/common-package workspace linking