From bb753d7814dbed4a9228e82a4d2fbdbb8c04256e Mon Sep 17 00:00:00 2001 From: soalCode <276701239+soalCode@users.noreply.github.com> Date: Thu, 16 Apr 2026 22:58:31 +0200 Subject: [PATCH 1/7] Aggiunti stili di testo e toolbar --- CHANGELOG_TEXT_STYLES.md | 31 +++++++ packages/common/Prefs.ts | 37 ++++++++ packages/renderer/src/App.tsx | 2 +- .../Views/Editor/EditorExtensions.ts | 8 +- .../components/Views/Editor/EditorView.tsx | 5 +- .../Views/Editor/TableOfContents.tsx | 35 ++++--- .../Views/Editor/Toolbar/Toolbar.tsx | 59 +++++++----- .../Views/Editor/extensions/CustomStyle.ts | 92 +++++++++++++++++++ .../src/components/Views/SettingsView.tsx | 39 +++++++- 9 files changed, 269 insertions(+), 39 deletions(-) create mode 100644 CHANGELOG_TEXT_STYLES.md create mode 100644 packages/renderer/src/components/Views/Editor/extensions/CustomStyle.ts diff --git a/CHANGELOG_TEXT_STYLES.md b/CHANGELOG_TEXT_STYLES.md new file mode 100644 index 0000000..5224125 --- /dev/null +++ b/CHANGELOG_TEXT_STYLES.md @@ -0,0 +1,31 @@ +# Feature: Word-like Custom Text Styles & Semantic Integration + +## Overview + +Implemented a dynamic, fully functioning "Custom Text Styles" engine for the Tiptap editor to allow users to save and easily apply predefined rich CSS formats. Furthermore, integrated the semantic logic (H1-H6, Blockquote, etc.) so that applying styles maintains proper document structure and Table of Contents (TOC) mappings. + +## Key Changes + +### 1. Dynamic Settings Configuration (`Prefs.ts` & `SettingsView.tsx`) + +- Migrated hard-coded CSS styles into the application's global `Prefs` (`EditorPrefs`), allowing styles to be dynamically configurable entirely by the end user. +- Added a `Custom Text Styles` settings section under Editor Options, equipped with a dedicated JSON `Textarea`. +- Created robust UI state management to prevent typing clobbering, enforcing strict JSON checks without disturbing the user's cursor while editing. + +### 2. Tiptap Engine Semantic Adaptation (`CustomStyle.ts`) + +- Rebuilt the `CustomStyle` Tiptap extension to read styles directly on the fly. +- Taught the `CustomStyle` parser to strip out internal semantic keywords (like `"tag"`) directly from CSS conversion (`renderHTML`). +- Configured dynamic initialization and destruction through `EditorExtensions.ts` and `EditorView.tsx`. + +### 3. Smart Unified Toolbar (`Toolbar.tsx`) + +- Removed the old, redundant, and messy 1-to-6 heading split component from the Top Toolbar to centralize styling. +- Bound the internal behavior of the Styles `} + placeholder="Text Style" + data={[ + { value: "default", label: "Default" }, + ...Object.keys(appContext.prefs.editor.customTextStyles || {}) + ]} + value={ + editor.getAttributes("textStyle").customStyleName || + editor.getAttributes("paragraph").customStyleName || + editor.getAttributes("heading").customStyleName || + "default" + } + onChange={(value) => { + let chain = editor.chain().focus(); + if (value === "default" || value == null) { + chain = chain.setParagraph().unsetCustomStyle(); + } else { + const styleObj = appContext.prefs.editor.customTextStyles[value]; + if (styleObj && styleObj.tag) { + if (styleObj.tag === "h1") chain = chain.setHeading({ level: 1 }); + else if (styleObj.tag === "h2") chain = chain.setHeading({ level: 2 }); + else if (styleObj.tag === "h3") chain = chain.setHeading({ level: 3 }); + else if (styleObj.tag === "h4") chain = chain.setHeading({ level: 4 }); + else if (styleObj.tag === "h5") chain = chain.setHeading({ level: 5 }); + else if (styleObj.tag === "h6") chain = chain.setHeading({ level: 6 }); + else if (styleObj.tag === "blockquote") chain = chain.setBlockquote(); + else if (styleObj.tag === "p") chain = chain.setParagraph(); + } + chain = chain.setCustomStyle(value); + } + chain.run(); + }} + /> +