@fileverse-dev/ddoc 6.0.1 → 7.0.0-drop-in.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fileverse-dev/ddoc",
   "private": false,
   "description": "DDoc",
-  "version": "6.0.1",
+  "version": "7.0.0-drop-in.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fileverse/fileverse-ddocs.git"
@@ -118,16 +118,19 @@
     "lib0": "^0.2.95",
     "lowlight": "^3.3.0",
     "mammoth": "^1.10.0",
+    "markdown-it": "^14.1.0",
     "markdown-it-footnote": "^4.0.0",
     "odf-kit": "^0.9.3",
     "ollama": "^0.5.14",
     "platform": "^1.3.6",
+    "prettier": "^3.4.2",
     "prosemirror-model": "^1.21.0",
     "prosemirror-state": "^1.4.3",
     "react-tweet": "^3.2.2",
     "react-uuid": "^2.0.0",
     "react-window": "^2.2.7",
     "socket.io-client": "^4.7.5",
+    "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.9.0",
     "turndown": "^7.2.0",
     "usehooks-ts": "^3.1.1",
@@ -181,6 +184,7 @@
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.19",
+    "emojibase": "^17.0.0",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -193,7 +197,6 @@
     "postcss": "^8.4.38",
     "postcss-nested": "^6.2.0",
     "postcss-selector-parser": "^6.1.4",
-    "prettier": "^3.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.3",

package/tailwind.preset.cjs

@@ -1,8 +1,16 @@
 // This file is the `@fileverse-dev/ddoc/tailwind` preset. It composes the ui preset
 // (dark mode, theme, design-system classes) and adds the `mobile` screen.
+// It also adds the ddoc-* variants (docs/DROP_IN_EDITOR.md §2.9).
 // Consumers: `presets: [require('@fileverse-dev/ddoc/tailwind')]` and add
 // node_modules/@fileverse-dev/ddoc/dist/**/*.{js,mjs} plus
 // node_modules/@fileverse/ui/dist/**/*.{js,mjs} to `content` (the dist is chunked).
+const plugin = require('tailwindcss/plugin');
+
+// Same widths as the screens, evaluated against the editor root when the
+// element is inside one and against the window otherwise. :where() keeps the
+// window form at the specificity of a screen variant.
+const DDOC_BREAKPOINTS = { sm: 640, md: 768, mobile: 960, lg: 1024, xl: 1280 };
+
 module.exports = {
   presets: [require('@fileverse/ui/tailwind')],
   theme: {
@@ -12,4 +20,38 @@ module.exports = {
       },
     },
   },
+  plugins: [
+    plugin(({ addVariant, matchVariant }) => {
+      const breakpoints = Object.entries(DDOC_BREAKPOINTS);
+      // Registration order is CSS order. Like Tailwind's screens: max variants
+      // first, widest first, so the narrower one wins; then min, ascending.
+      for (const [name, px] of [...breakpoints].reverse()) {
+        addVariant(`ddoc-max-${name}`, [
+          `@container ddoc-editor (max-width: ${px - 0.02}px)`,
+          `@media (max-width: ${px - 0.02}px) { &:where(:not(.ddoc-editor-cq *)) }`,
+        ]);
+      }
+      for (const [name, px] of breakpoints) {
+        addVariant(`ddoc-${name}`, [
+          `@container ddoc-editor (min-width: ${px}px)`,
+          `@media (min-width: ${px}px) { &:where(:not(.ddoc-editor-cq *)) }`,
+        ]);
+      }
+      // One-off widths: ddoc-min-[1410px]: and ddoc-max-[1280px]: (inclusive).
+      for (const bound of ['min', 'max']) {
+        matchVariant(
+          `ddoc-${bound}`,
+          (value) => [
+            `@container ddoc-editor (${bound}-width: ${value})`,
+            `@media (${bound}-width: ${value}) { &:where(:not(.ddoc-editor-cq *)) }`,
+          ],
+          {
+            sort: (a, z) =>
+              (parseFloat(a.value) - parseFloat(z.value)) *
+              (bound === 'min' ? 1 : -1),
+          },
+        );
+      }
+    }),
+  ],
 };