@phuong-tran-redoc/document-engine-angular 0.0.33 → 0.0.35

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, Type, Injector, ElementRef, InjectionToken, AfterViewInit, Renderer2, ChangeDetectorRef, AfterContentInit, QueryList } from '@angular/core';
+import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, Type, InjectionToken, AfterViewInit, ElementRef, Renderer2, ChangeDetectorRef, Injector, AfterContentInit, QueryList } from '@angular/core';
 import { IndentOptions, DynamicFieldOptions, DynamicFieldCategory as DynamicFieldCategory$1, RestrictedEditingOptions, TextCaseType, ListStyleType, Color, DynamicFieldItem as DynamicFieldItem$1 } from '@phuong-tran-redoc/document-engine-core';
 import { BlockquoteOptions } from '@tiptap/extension-blockquote';
 import { BoldOptions } from '@tiptap/extension-bold';
@@ -321,6 +321,7 @@ declare class EditorCapabilities {
  */
 declare class DocumentEditorComponent implements OnInit, OnChanges, OnDestroy {
     private readonly ngZone;
+    private readonly contentWrapperClass;
     config?: Partial<DocumentEngineConfig>;
     editorReady: EventEmitter<Editor>;
     editor: Editor;
@@ -638,9 +639,84 @@ declare class FooterComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "document-engine-footer", never, { "editor": { "alias": "editor"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Type definition for HTML preprocessor function.
+ * Allows clients to transform HTML content before it's set into the editor.
+ *
+ * @param html - The raw HTML string to be processed
+ * @returns The processed HTML string that will be set into the editor
+ *
+ * @example
+ * ```typescript
+ * const myPreprocessor: EditorHtmlPreprocessor = (html: string) => {
+ *   // Remove all script tags for security
+ *   return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+ * };
+ * ```
+ */
+type EditorHtmlPreprocessor = (html: string) => string;
+/**
+ * Injection token for HTML preprocessor function.
+ * Use this token to provide a custom function that processes HTML content
+ * before it's set into the TipTap editor.
+ *
+ * This is optional - if not provided, the editor will use the HTML content as-is.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_HTML_PREPROCESSOR,
+ *   useValue: (html: string) => {
+ *     // Your custom preprocessing logic
+ *     return html.replace(/old/g, 'new');
+ *   }
+ * }
+ * ```
+ */
+declare const EDITOR_HTML_PREPROCESSOR: InjectionToken<EditorHtmlPreprocessor>;
+/**
+ * Injection token for content wrapper class.
+ * Use this token to provide a custom class name for the content wrapper element.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_CONTENT_WRAPPER_CLASS,
+ *   useValue: 'my-content-wrapper'
+ * }
+ * ```
+ */
+declare const EDITOR_CONTENT_WRAPPER_CLASS: InjectionToken<string | null>;
+
+declare class TiptapEditorDirective implements OnInit, AfterViewInit, ControlValueAccessor {
+    protected elRef: ElementRef<HTMLElement>;
+    protected renderer: Renderer2;
+    protected changeDetectorRef: ChangeDetectorRef;
+    protected htmlPreprocessor: EditorHtmlPreprocessor | null;
+    protected contentWrapperClass: string | null;
+    private _editor?;
+    private initialEditableState?;
+    set editor(editor: Editor);
+    get editor(): Editor;
+    outputFormat: 'json' | 'html';
+    protected onChange: (value: Content) => void;
+    protected onTouched: () => void;
+    writeValue(value: Content): void;
+    registerOnChange(fn: () => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected handleChange: ({ editor, transaction }: EditorEvents["transaction"]) => void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TiptapEditorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TiptapEditorDirective, "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", never, { "editor": { "alias": "editor"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class DocumentEditorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DocumentEditorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DocumentEditorModule, [typeof DocumentEditorComponent], [typeof i2.CommonModule, typeof ToolbarComponent, typeof FooterComponent], [typeof DocumentEditorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DocumentEditorModule, [typeof DocumentEditorComponent], [typeof i2.CommonModule, typeof ToolbarComponent, typeof FooterComponent, typeof TiptapEditorDirective], [typeof DocumentEditorComponent, typeof TiptapEditorDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DocumentEditorModule>;
 }
 
@@ -735,66 +811,6 @@ declare class TiptapDraggableDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<TiptapDraggableDirective, "[tiptapDraggable]", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * Type definition for HTML preprocessor function.
- * Allows clients to transform HTML content before it's set into the editor.
- *
- * @param html - The raw HTML string to be processed
- * @returns The processed HTML string that will be set into the editor
- *
- * @example
- * ```typescript
- * const myPreprocessor: EditorHtmlPreprocessor = (html: string) => {
- *   // Remove all script tags for security
- *   return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
- * };
- * ```
- */
-type EditorHtmlPreprocessor = (html: string) => string;
-/**
- * Injection token for HTML preprocessor function.
- * Use this token to provide a custom function that processes HTML content
- * before it's set into the TipTap editor.
- *
- * This is optional - if not provided, the editor will use the HTML content as-is.
- *
- * @example
- * ```typescript
- * // In your component or module providers
- * {
- *   provide: EDITOR_HTML_PREPROCESSOR,
- *   useValue: (html: string) => {
- *     // Your custom preprocessing logic
- *     return html.replace(/old/g, 'new');
- *   }
- * }
- * ```
- */
-declare const EDITOR_HTML_PREPROCESSOR: InjectionToken<EditorHtmlPreprocessor>;
-
-declare class TiptapEditorDirective implements OnInit, AfterViewInit, ControlValueAccessor {
-    protected elRef: ElementRef<HTMLElement>;
-    protected renderer: Renderer2;
-    protected changeDetectorRef: ChangeDetectorRef;
-    protected htmlPreprocessor: EditorHtmlPreprocessor | null;
-    private _editor?;
-    private initialEditableState?;
-    set editor(editor: Editor);
-    get editor(): Editor;
-    outputFormat: 'json' | 'html';
-    protected onChange: (value: Content) => void;
-    protected onTouched: () => void;
-    writeValue(value: Content): void;
-    registerOnChange(fn: () => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    protected handleChange: ({ editor, transaction }: EditorEvents["transaction"]) => void;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TiptapEditorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TiptapEditorDirective, "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", never, { "editor": { "alias": "editor"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 declare class TiptapFloatingMenuDirective implements OnInit, OnDestroy {
     private elRef;
     constructor(elRef: ElementRef<HTMLElement>);
@@ -1740,5 +1756,5 @@ declare class EditorBubbleMenuComponent implements OnInit, AfterViewInit, OnDest
     static ɵcmp: i0.ɵɵComponentDeclaration<EditorBubbleMenuComponent, "document-engine-editor-bubble-menu", never, { "editor": { "alias": "editor"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EDITOR_HTML_PREPROCESSOR, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
+export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EDITOR_CONTENT_WRAPPER_CLASS, EDITOR_HTML_PREPROCESSOR, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
 export type { BubbleMenuProps, BubbleMenuViewConfig, BubbleMenuViewContent, BubbleTarget, ButtonType, DocumentEngineConfig, DynamicFieldCategory, DynamicFieldItem, EditorBubbleMenuConfig, EditorHtmlPreprocessor, HeadingLevel, IconButton, OutsideHandler, SelectButton, SelectOption, TableCreateViewData, TemplateItem, ToolbarBubbleMenuConfig, ToolbarButton, ToolbarState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phuong-tran-redoc/document-engine-angular",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "commonjs",
   "license": "MIT",
   "author": "Duc Phuong (Jack) <tdp99.business@gmail.com>",
@@ -26,7 +26,7 @@
   "dependencies": {
     "tslib": "^2.3.0",
     "@floating-ui/dom": "^1.7.4",
-    "@phuong-tran-redoc/document-engine-core": "0.0.33"
+    "@phuong-tran-redoc/document-engine-core": "0.0.35"
   },
   "peerDependencies": {
     "rxjs": "^7.5.0",

package/src/lib/styles/button.scss

@@ -36,11 +36,11 @@
     box-shadow: 0 0 0 3px var(--destructive, hsl(0 84.2% 60.2% / 0.2));
   }
 
-  @media (prefers-color-scheme: dark) {
-    &[aria-invalid='true'] {
-      box-shadow: 0 0 0 3px var(--destructive, hsl(0 84.2% 60.2% / 0.4));
-    }
-  }
+  // @media (prefers-color-scheme: dark) {
+  //   &[aria-invalid='true'] {
+  //     box-shadow: 0 0 0 3px var(--destructive, hsl(0 84.2% 60.2% / 0.4));
+  //   }
+  // }
 }
 
 // Variant: default (primary)
@@ -68,13 +68,13 @@
     box-shadow: 0 0 0 3px var(--destructive, hsl(0 84.2% 60.2% / 0.2));
   }
 
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--destructive, hsl(0 84.2% 60.2% / 0.6));
+  // @media (prefers-color-scheme: dark) {
+  //   background-color: var(--destructive, hsl(0 84.2% 60.2% / 0.6));
 
-    &:focus-visible {
-      box-shadow: 0 0 0 3px var(--destructive, hsl(0 84.2% 60.2% / 0.4));
-    }
-  }
+  //   &:focus-visible {
+  //     box-shadow: 0 0 0 3px var(--destructive, hsl(0 84.2% 60.2% / 0.4));
+  //   }
+  // }
 }
 
 // Variant: outline
@@ -88,14 +88,14 @@
     color: var(--accent-foreground, hsl(222.2 47.4% 11.2%));
   }
 
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--input, hsl(214.3 31.8% 91.4% / 0.3));
-    border-color: var(--input, hsl(214.3 31.8% 91.4%));
+  // @media (prefers-color-scheme: dark) {
+  //   background-color: var(--input, hsl(214.3 31.8% 91.4% / 0.3));
+  //   border-color: var(--input, hsl(214.3 31.8% 91.4%));
 
-    &:hover:not(:disabled) {
-      background-color: var(--input, hsl(214.3 31.8% 91.4% / 0.5));
-    }
-  }
+  //   &:hover:not(:disabled) {
+  //     background-color: var(--input, hsl(214.3 31.8% 91.4% / 0.5));
+  //   }
+  // }
 }
 
 // Variant: secondary
@@ -120,11 +120,11 @@
     color: var(--accent-foreground, hsl(222.2 47.4% 11.2%));
   }
 
-  @media (prefers-color-scheme: dark) {
-    &:hover:not(:disabled) {
-      background-color: var(--accent, hsl(210 40% 96.1% / 0.5));
-    }
-  }
+  // @media (prefers-color-scheme: dark) {
+  //   &:hover:not(:disabled) {
+  //     background-color: var(--accent, hsl(210 40% 96.1% / 0.5));
+  //   }
+  // }
 }
 
 // Variant: link

package/src/lib/styles/toolbar.scss

@@ -33,7 +33,7 @@
   &-group {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.25rem;
     flex-shrink: 0;
 
     // Auto-add divider after each group (except the last one)
@@ -43,8 +43,8 @@
       content: '';
       width: 1px;
       height: 1.25rem;
-      margin-left: 0.5rem;
-      margin-right: 1rem;
+      margin-left: 0.25rem;
+      margin-right: 0.5rem;
       background-color: var(--muted-foreground, #9ca3af);
       align-self: center;
       flex-shrink: 0;