@flogeez/angular-tiptap-editor 2.0.2 → 2.0.3

package/index.d.ts

@@ -158,6 +158,8 @@ interface TiptapTranslations {
         linkPrompt: string;
         linkUrlPrompt: string;
         confirmDelete: string;
+        toggleEdit: string;
+        viewMode: string;
     };
     common: {
         cancel: string;
@@ -330,6 +332,8 @@ declare class TiptapI18nService {
         linkPrompt: string;
         linkUrlPrompt: string;
         confirmDelete: string;
+        toggleEdit: string;
+        viewMode: string;
     }>;
     readonly common: _angular_core.Signal<{
         cancel: string;
@@ -879,6 +883,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     autofocus: _angular_core.InputSignal<number | boolean | "start" | "end" | "all">;
     seamless: _angular_core.InputSignal<boolean>;
     floatingToolbar: _angular_core.InputSignal<boolean>;
+    showEditToggle: _angular_core.InputSignal<boolean>;
     tiptapExtensions: _angular_core.InputSignal<(Node<any, any> | Mark<any, any> | Extension<any, any>)[]>;
     tiptapOptions: _angular_core.InputSignal<Partial<EditorOptions>>;
     showBubbleMenu: _angular_core.InputSignal<boolean>;
@@ -929,6 +934,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         editor: Editor;
         event: FocusEvent;
     }>;
+    editableChange: _angular_core.OutputEmitterRef<boolean>;
     editorElement: _angular_core.Signal<ElementRef<any>>;
     hideBubbleMenus(): void;
     showBubbleMenus(): void;
@@ -974,6 +980,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private initEditor;
+    toggleEditMode(event: Event): void;
     private updateCharacterCount;
     onDragOver(event: DragEvent): void;
     onDrop(event: DragEvent): void;
@@ -989,7 +996,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     private setupFormControlSubscription;
     onEditorClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AngularTiptapEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; "editableChange": "editableChange"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }
 
 interface ColorPickerSelection {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",

package/src/lib/styles/bubble-menu.global.css

@@ -1,52 +1,52 @@
-/* Styles globaux pour les menus contextuels Tiptap */
-.tippy-box {
-  /* Par défaut Tippy limite à 350px */
-  max-width: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-}
-
-.tippy-content {
-  /* Le container interne ne doit pas rajouter de padding, on gère dans .bubble-menu */
-  padding: 0;
-}
-
-.tippy-box .bubble-menu {
-  display: flex !important;
-  align-items: center;
-  gap: 6px;
-  background: var(--ate-menu-bg, rgb(255, 255, 255)) !important;
-  border: 1px solid var(--ate-menu-border, rgba(0, 0, 0, 0.1));
-  border-radius: var(--ate-menu-border-radius, 16px);
-  padding: var(--ate-menu-padding, 6px);
-  box-shadow: var(--ate-menu-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
-  z-index: 1000;
-  animation: slideUp 0.18s cubic-bezier(0, 0, 0.2, 1);
-  white-space: nowrap;
-}
-
-/* Cache le menu intelligemment si la source (le slash) est scrollée hors vue */
-.tippy-box[data-reference-hidden] {
-  opacity: 0 !important;
-  transition: opacity 0.18s cubic-bezier(0, 0, 0.2, 1);
-  pointer-events: none !important;
-}
-
-.bubble-menu .tiptap-separator {
-  width: 1px;
-  height: 28px;
-  background: color-mix(in srgb, var(--ate-menu-border), transparent 50%);
-  margin: 0 4px;
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
+/* Styles globaux pour les menus contextuels Tiptap */
+.tippy-box {
+  /* Par défaut Tippy limite à 350px */
+  max-width: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.tippy-content {
+  /* Le container interne ne doit pas rajouter de padding, on gère dans .bubble-menu */
+  padding: 0;
+}
+
+.tippy-box .bubble-menu {
+  display: flex !important;
+  align-items: center;
+  gap: 6px;
+  background: var(--ate-menu-bg, rgb(255, 255, 255)) !important;
+  border: 1px solid var(--ate-menu-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--ate-menu-border-radius, 12px);
+  padding: var(--ate-menu-padding, 6px);
+  box-shadow: var(--ate-menu-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  z-index: 1000;
+  animation: slideUp 0.18s cubic-bezier(0, 0, 0.2, 1);
+  white-space: nowrap;
+}
+
+/* Cache le menu intelligemment si la source (le slash) est scrollée hors vue */
+.tippy-box[data-reference-hidden] {
+  opacity: 0 !important;
+  transition: opacity 0.18s cubic-bezier(0, 0, 0.2, 1);
+  pointer-events: none !important;
+}
+
+.bubble-menu .tiptap-separator {
+  width: 1px;
+  height: 28px;
+  background: color-mix(in srgb, var(--ate-menu-border), transparent 50%);
+  margin: 0 4px;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+

package/src/lib/styles/index.css

@@ -1,40 +1,40 @@
-@import "./bubble-menu.global.css";
-@import "./material-symbols.css";
-
-/* Styles pour les liens */
-.tiptap-link {
-  color: var(--ate-primary, #1d4ed8);
-  text-decoration: underline;
-  cursor: pointer;
-  transition: color 0.2s ease;
-}
-
-.tiptap-link:hover {
-  color: var(--ate-primary-light-alpha, #1d4ed8);
-  text-decoration: underline;
-}
-
-/* Styles pour la surbrillance */
-.tiptap-highlight {
-  background-color: var(--ate-highlight-bg, #fef08a);
-  padding: 0.1em 0.2em;
-  border-radius: 2px;
-  color: var(--ate-highlight-color, #854d0e);
-}
-
-/* Styles pour les alignements de texte - Tiptap utilise des classes */
-.ProseMirror .has-text-align-left {
-  text-align: left;
-}
-
-.ProseMirror .has-text-align-center {
-  text-align: center;
-}
-
-.ProseMirror .has-text-align-right {
-  text-align: right;
-}
-
-.ProseMirror .has-text-align-justify {
-  text-align: justify;
-}
+@import "./bubble-menu.global.css";
+@import "./material-symbols.css";
+
+/* Styles pour les liens */
+.tiptap-link {
+  color: var(--ate-primary, #1d4ed8);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.tiptap-link:hover {
+  color: var(--ate-primary-light-alpha, #1d4ed8);
+  text-decoration: underline;
+}
+
+/* Styles pour la surbrillance */
+.tiptap-highlight {
+  background-color: var(--ate-highlight-bg, #fef08a);
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  color: var(--ate-highlight-color, #854d0e);
+}
+
+/* Styles pour les alignements de texte - Tiptap utilise des classes */
+.ProseMirror .has-text-align-left {
+  text-align: left;
+}
+
+.ProseMirror .has-text-align-center {
+  text-align: center;
+}
+
+.ProseMirror .has-text-align-right {
+  text-align: right;
+}
+
+.ProseMirror .has-text-align-justify {
+  text-align: justify;
+}

package/src/lib/styles/material-symbols.css

@@ -1,17 +1,17 @@
-.material-symbols-outlined {
-  font-family: "Material Symbols Outlined";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
-}
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+}