@ethlete/components 1.0.0-next.35 → 1.0.0-next.36

package/generators/generators.json

@@ -5,11 +5,21 @@
       "schema": "./migrate-query-error-labels/schema.json",
       "description": "Find query-error usage affected by the English-only label default and report where German must be re-opted-in"
     },
+    "migrate-rich-text-editor-floating-toolbar": {
+      "factory": "./migrate-rich-text-editor-floating-toolbar/migration",
+      "schema": "./migrate-rich-text-editor-floating-toolbar/schema.json",
+      "description": "Find rich text editor usage that loses the selection toolbar and report where to re-opt-in"
+    },
     "migrate-rich-text-editor-link-editor": {
       "factory": "./migrate-rich-text-editor-link-editor/migration",
       "schema": "./migrate-rich-text-editor-link-editor/schema.json",
       "description": "Find rich text editor usage that loses the link editor popover and report where to re-opt-in"
     },
+    "migrate-rich-text-editor-tools": {
+      "factory": "./migrate-rich-text-editor-tools/migration",
+      "schema": "./migrate-rich-text-editor-tools/schema.json",
+      "description": "Find rich text editor usage that loses the heading, quote, code-block and link tools and report where to re-opt-in"
+    },
     "icons": {
       "factory": "./icons/generator",
       "schema": "./icons/schema.json",

package/generators/migrate-rich-text-editor-floating-toolbar/migration.js

@@ -0,0 +1,57 @@
+import { formatFiles } from '@nx/devkit';
+import { createMigrationScope } from '../migrate-query-error-labels/migration-scope.js';
+import { scanRichTextEditorFloatingToolbarInFile, } from './rich-text-editor-floating-toolbar.js';
+export const RICH_TEXT_EDITOR_FLOATING_TOOLBAR_REPORT_PATH = 'rich-text-editor-floating-toolbar-migration-tasks.md';
+const renderReport = (tasks) => [
+    '# Rich text editor selection toolbar migration tasks',
+    '',
+    'The rich text editor no longer mounts the toolbar that follows the selection. An editor that never opts',
+    'in keeps its static toolbar only — and stops bundling the overlay runtime and anchored positioning this',
+    'was the sole reason a default editor needed, worth ~15 kB gz (~22 kB with `@floating-ui/dom`).',
+    '',
+    'To keep it, add once — app-wide, or on the component/route that renders the editor:',
+    '',
+    '```ts',
+    "import { provideRichTextEditorFloatingToolbar } from '@ethlete/components';",
+    '',
+    'provideRichTextEditorFloatingToolbar();',
+    '```',
+    '',
+    'It never offered an action the static toolbar does not, and it was already suppressed on touch devices, so',
+    'leaving it out costs no functionality — if that is fine, there is nothing to do; delete this file.',
+    '',
+    ...tasks.map((task) => [`## \`${task.id}\``, '', `- ${task.file}:${task.line}`, `- ${task.message}`, ''].join('\n')),
+].join('\n');
+export default async function migrateRichTextEditorFloatingToolbar(tree, schema) {
+    console.log('\n🔎 Scanning for rich text editor usage affected by the opt-in selection toolbar...');
+    const scope = createMigrationScope(tree, schema);
+    console.log(`   Scope: ${scope.describe()}`);
+    const tasks = [];
+    let hasFloatingToolbarProvider = false;
+    scope.visit(tree, (filePath) => {
+        if (!/\.(ts|html)$/.test(filePath) || filePath.endsWith('.d.ts'))
+            return;
+        const content = tree.read(filePath, 'utf-8');
+        if (!content)
+            return;
+        const result = scanRichTextEditorFloatingToolbarInFile(filePath, content);
+        tasks.push(...result.usages);
+        hasFloatingToolbarProvider ||= result.hasFloatingToolbarProvider;
+    });
+    if (hasFloatingToolbarProvider) {
+        console.log('   ✓ Found a provideRichTextEditorFloatingToolbar call — it is already opted back in.');
+    }
+    else if (tasks.length > 0) {
+        tree.write(RICH_TEXT_EDITOR_FLOATING_TOOLBAR_REPORT_PATH, renderReport(tasks));
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+    if (!hasFloatingToolbarProvider && tasks.length > 0) {
+        console.log(`\n⚠️  ${tasks.length} site(s) use the rich text editor without the selection toolbar — see ${RICH_TEXT_EDITOR_FLOATING_TOOLBAR_REPORT_PATH}.`);
+    }
+    else {
+        console.log('\n✅ Nothing to do.');
+    }
+}
+//# sourceMappingURL=migration.js.map

package/generators/migrate-rich-text-editor-floating-toolbar/rich-text-editor-floating-toolbar.js

@@ -0,0 +1,28 @@
+/**
+ * The rich text editor no longer mounts the toolbar that follows the selection — it is an opt-in
+ * `provideRichTextEditorFloatingToolbar()`, and without it an editor keeps its static toolbar only.
+ * Whether an app wants it back is its own call, so this migration only finds the affected sites and
+ * reports them; it rewrites nothing.
+ */
+const USAGE_MARKERS = [
+    'et-rich-text-editor',
+    'RICH_TEXT_EDITOR_IMPORTS',
+    'RichTextEditorComponent',
+    'etRichTextEditor',
+];
+const OPT_IN_MARKER = 'provideRichTextEditorFloatingToolbar';
+export const scanRichTextEditorFloatingToolbarInFile = (filePath, content) => {
+    const usages = [];
+    const marker = USAGE_MARKERS.find((m) => content.includes(m));
+    if (marker) {
+        const line = content.slice(0, content.indexOf(marker)).split('\n').length;
+        usages.push({
+            id: `rich-text-editor-floating-toolbar--${filePath.replace(/[^a-zA-Z0-9]+/g, '-')}`,
+            file: filePath,
+            line,
+            message: `Uses the rich text editor (\`${marker}\`). Selecting text no longer floats a toolbar over the selection unless it is provided.`,
+        });
+    }
+    return { usages, hasFloatingToolbarProvider: content.includes(OPT_IN_MARKER) };
+};
+//# sourceMappingURL=rich-text-editor-floating-toolbar.js.map

package/generators/migrate-rich-text-editor-floating-toolbar/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "migrate-rich-text-editor-floating-toolbar",
+  "title": "Find rich text editor usage affected by the opt-in selection toolbar",
+  "type": "object",
+  "properties": {
+    "projects": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Nx projects to scan. Defaults to every project in the workspace.",
+      "alias": "project"
+    },
+    "include": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Path prefixes to scan, relative to the workspace root (e.g. 'apps/shop'). Unioned with `projects`.",
+      "alias": "includePath"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after migration",
+      "default": false
+    }
+  },
+  "required": []
+}

package/generators/migrate-rich-text-editor-tools/migration.js

@@ -0,0 +1,64 @@
+import { formatFiles } from '@nx/devkit';
+import { createMigrationScope } from '../migrate-query-error-labels/migration-scope.js';
+import { scanRichTextEditorToolsInFile } from './rich-text-editor-tools.js';
+export const RICH_TEXT_EDITOR_TOOLS_REPORT_PATH = 'rich-text-editor-tools-migration-tasks.md';
+const renderReport = (tasks) => [
+    '# Rich text editor tools migration tasks',
+    '',
+    "The rich text editor's block-style menu, quotes, code blocks, links and markdown-as-you-type are opt-in.",
+    'Without a provider those four buttons render nothing and a typed `# ` / `> ` / ``` stays literal text, so',
+    'an editor that only needs marks and lists stops bundling any of it.',
+    '',
+    'To get the previous toolbar back, add once — app-wide, or on the component/route that renders the editor:',
+    '',
+    '```ts',
+    "import { provideRichTextEditorDefaultTools } from '@ethlete/components';",
+    '',
+    'provideRichTextEditorDefaultTools();',
+    '```',
+    '',
+    'For a smaller editor, register only what it offers instead:',
+    '`provideRichTextEditorHeadingTool()`, `provideRichTextEditorBlockquoteTool()`,',
+    '`provideRichTextEditorCodeBlockTool()`, `provideRichTextEditorLinkTool()`,',
+    '`provideRichTextEditorAutoformat()`.',
+    '',
+    'Calling `toggleBlockquote()`, `toggleHeading()`, `applyLink()` and friends without their provider throws',
+    '`ET2506` in dev mode and no-ops in production.',
+    '',
+    'If marks and lists are all the app needs, there is nothing to do — delete this file.',
+    '',
+    ...tasks.map((task) => [`## \`${task.id}\``, '', `- ${task.file}:${task.line}`, `- ${task.message}`, ''].join('\n')),
+].join('\n');
+export default async function migrateRichTextEditorTools(tree, schema) {
+    console.log('\n🔎 Scanning for rich text editor usage affected by the opt-in tools...');
+    const scope = createMigrationScope(tree, schema);
+    console.log(`   Scope: ${scope.describe()}`);
+    const tasks = [];
+    let hasToolProvider = false;
+    scope.visit(tree, (filePath) => {
+        if (!/\.(ts|html)$/.test(filePath) || filePath.endsWith('.d.ts'))
+            return;
+        const content = tree.read(filePath, 'utf-8');
+        if (!content)
+            return;
+        const result = scanRichTextEditorToolsInFile(filePath, content);
+        tasks.push(...result.usages);
+        hasToolProvider ||= result.hasToolProvider;
+    });
+    if (hasToolProvider) {
+        console.log('   ✓ Found a tool provider — the app already opts into the tools it wants.');
+    }
+    else if (tasks.length > 0) {
+        tree.write(RICH_TEXT_EDITOR_TOOLS_REPORT_PATH, renderReport(tasks));
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+    if (!hasToolProvider && tasks.length > 0) {
+        console.log(`\n⚠️  ${tasks.length} site(s) use the rich text editor without any tool provider — see ${RICH_TEXT_EDITOR_TOOLS_REPORT_PATH}.`);
+    }
+    else {
+        console.log('\n✅ Nothing to do.');
+    }
+}
+//# sourceMappingURL=migration.js.map

package/generators/migrate-rich-text-editor-tools/rich-text-editor-tools.js

@@ -0,0 +1,36 @@
+/**
+ * The rich text editor's heading, quote, code-block, link and autoformat behaviour is opt-in. An
+ * editor that provides none of it silently renders four fewer toolbar buttons and stops converting
+ * markdown as you type - no error, just less UI - so this migration finds the affected sites and
+ * reports them; it rewrites nothing.
+ */
+const USAGE_MARKERS = [
+    'et-rich-text-editor',
+    'RICH_TEXT_EDITOR_IMPORTS',
+    'RichTextEditorComponent',
+    'etRichTextEditor',
+];
+/** Any one of these means the app already knows about the split - `DefaultTools` or a single tool. */
+const OPT_IN_MARKERS = [
+    'provideRichTextEditorDefaultTools',
+    'provideRichTextEditorHeadingTool',
+    'provideRichTextEditorBlockquoteTool',
+    'provideRichTextEditorCodeBlockTool',
+    'provideRichTextEditorLinkTool',
+    'provideRichTextEditorAutoformat',
+];
+export const scanRichTextEditorToolsInFile = (filePath, content) => {
+    const usages = [];
+    const marker = USAGE_MARKERS.find((m) => content.includes(m));
+    if (marker) {
+        const line = content.slice(0, content.indexOf(marker)).split('\n').length;
+        usages.push({
+            id: `rich-text-editor-tools--${filePath.replace(/[^a-zA-Z0-9]+/g, '-')}`,
+            file: filePath,
+            line,
+            message: `Uses the rich text editor (\`${marker}\`). Its heading, quote, code-block and link tools and its markdown autoformat only render/run when provided now.`,
+        });
+    }
+    return { usages, hasToolProvider: OPT_IN_MARKERS.some((m) => content.includes(m)) };
+};
+//# sourceMappingURL=rich-text-editor-tools.js.map

package/generators/migrate-rich-text-editor-tools/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "migrate-rich-text-editor-tools",
+  "title": "Find rich text editor usage affected by the opt-in tools",
+  "type": "object",
+  "properties": {
+    "projects": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Nx projects to scan. Defaults to every project in the workspace.",
+      "alias": "project"
+    },
+    "include": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Path prefixes to scan, relative to the workspace root (e.g. 'apps/shop'). Unioned with `projects`.",
+      "alias": "includePath"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after migration",
+      "default": false
+    }
+  },
+  "required": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.35",
+  "version": "1.0.0-next.36",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {