@gilav21/shadcn-angular-rte 0.1.2 → 0.2.1

package/README.md

@@ -12,39 +12,54 @@ fixes.
 - **Angular 20 or 21** (peer `>=20.0.0 <22.0.0`). Both majors are covered by
   the e2e suite, which installs this package's real tarball into a pristine
   Angular 20 app and a pristine Angular 21 app and builds both.
-- **Tailwind CSS v4**.
 - Works in zoneless apps.
+- **No Tailwind required.** The package ships its styles precompiled; your app
+  does not need Tailwind, PostCSS or any CSS setup of its own.
 
 ## Install
 
 ```bash
-npm install @gilav21/shadcn-angular-rte
-npm install -D tailwindcss @tailwindcss/postcss postcss
+ng add @gilav21/shadcn-angular-rte
 ```
 
-If you do not already have Tailwind wired up, add `.postcssrc.json`:
+That installs the package and registers its stylesheet in `angular.json`.
+Nothing else to configure.
+
+Can't run `ng add`? Install with npm and add the stylesheet to the `styles`
+array of your app's build target yourself:
 
 ```json
-{ "plugins": { "@tailwindcss/postcss": {} } }
+"styles": ["@gilav21/shadcn-angular-rte/styles.css", "src/styles.css"]
 ```
 
-## Styles
+### What the stylesheet does — and doesn't — touch
+
+`styles.css` styles only the editor and its overlays. It does **not** restyle your app:
+
+- Tailwind's reset is scoped to the package's own elements — your `body`,
+  headings and buttons keep their styles.
+- The design tokens (`--primary`, `--background`, …) are declared at zero
+  specificity, so tokens your app already defines — for example from
+  `npx shadcn-angular init` — win.
+- Apps that run their own Tailwind build are fine: the package's utilities
+  coexist with yours.
+- Text uses **your app's font** — the package sets no `font-family` of its own,
+  so it matches your typography. An app with no font set shows the browser
+  default (usually a serif); set one on `body` (for example
+  `font-family: system-ui, sans-serif`) for the familiar shadcn look.
+
+## Themes
 
-Add these three lines to your global stylesheet:
+`ui-rich-text-editor` takes a `theme` input with the same presets `npx shadcn-angular
+change-theme` offers: `zinc`, `slate`, `stone`, `gray`, `neutral`, `red`, `rose`, `orange`, `green`, `blue`, `yellow`, `violet`, `amber`.
 
-```css
-@import "tailwindcss";
-@source "../node_modules/@gilav21/shadcn-angular-rte";
-@import "@gilav21/shadcn-angular-rte/theme.css";
+```html
+<ui-rich-text-editor theme="violet" … />
 ```
 
-- The `@source` line is **required**. Tailwind v4 does not scan `node_modules`
-  by default, so without it none of the editor's utility classes are generated
-  and the editor renders unstyled.
-- The `theme.css` import ships the design tokens (`:root` / `.dark` custom
-  properties, `@theme inline`, base layer). **Skip it if your app is already
-  CLI-initialised** (`npx shadcn-angular init` wrote the same tokens into your
-  own stylesheet, and importing both duplicates the `:root` block).
+The preset applies to that instance only, including its menus, popovers,
+tooltips and dialogs, and it follows `.dark` mode. Leave `theme` unset to
+use your app's tokens.
 
 ## Usage
 
@@ -120,9 +135,9 @@ download only when a user actually imports a file.
 ## Locale, RTL and density
 
 `[locale]` is set per editor instance (`locale="he"`), and RTL follows the
-document direction. Density is driven by the CSS custom properties in
-`theme.css`; override `--density` (or `--density-rich-text-editor`) in your own
-stylesheet to scale spacing.
+document direction. Density is driven by CSS custom properties; override
+`--density` (or `--density-rich-text-editor`) in your own stylesheet to scale
+spacing.
 
 ## Selectors are fixed
 
@@ -152,13 +167,14 @@ uses. In practice:
 
 ## Troubleshooting
 
-**Nothing is styled.** The `@source` line is missing or points at the wrong
-path. It must resolve, from the stylesheet's own location, to this package
-inside `node_modules`.
+**Nothing is styled.** The stylesheet is not registered. Re-run `ng add @gilav21/shadcn-angular-rte`,
+or check that `"@gilav21/shadcn-angular-rte/styles.css"` is in your build target's `styles` array.
 
-**Colours are missing / everything is transparent.** `theme.css` was not
-imported and your app has no shadcn token block of its own. Add the third CSS
-line.
+**A package element looks off in my app.** Global rules your app declares
+outside any `@layer` (say `button { padding: 1rem }`) beat the package's
+styles, which live in cascade layers. Scope such rules to your own markup, or
+put your global stylesheet in a layer. To restyle a package element on purpose,
+pass classes through its `class` input.
 
 **`npm install` fails with a peer error on `@angular/core`.** This package
 supports Angular 20 and 21. On Angular 19 or older, use the CLI copy model

package/fesm2022/{gilav21-shadcn-angular-rte-docx-parser-B8BeJWtY.mjs → gilav21-shadcn-angular-rte-docx-parser-DiBPweI4.mjs}

@@ -1,5 +1,5 @@
 import { i as inflate } from './gilav21-shadcn-angular-rte-inflate-laXxypva.mjs';
-import { i as isValidImageMagicBytes } from './gilav21-shadcn-angular-rte-gilav21-shadcn-angular-rte-CfjU_y-y.mjs';
+import { i as isValidImageMagicBytes } from './gilav21-shadcn-angular-rte-gilav21-shadcn-angular-rte-BnEAQOuU.mjs';
 
 const DEFAULT_MAX_UNCOMPRESSED = 1024 * 1024 * 1024;
 const DEFAULT_MAX_FILE_SIZE = 200 * 1024 * 1024;
@@ -279,6 +279,31 @@ const HIGHLIGHT_COLOR_MAP = {
     black: '#000000',
     white: '#FFFFFF',
 };
+/**
+ * OOXML `ST_HexColor`: exactly six hex digits (`auto` and anything else is not a
+ * colour). The model's colour fields hold only this form, so a value read out of
+ * the document can never carry a quote, a `;` or a `url(` into the markup.
+ */
+function hexColor(raw) {
+    return raw && /^[\dA-Fa-f]{6}$/.test(raw) ? `#${raw}` : undefined;
+}
+const TEXT_ALIGN_BY_JC = new Map([
+    ['both', 'justify'], ['distribute', 'justify'],
+    ['center', 'center'],
+    ['left', 'left'], ['start', 'left'],
+    ['right', 'right'], ['end', 'right'],
+]);
+const VERTICAL_ALIGN_BY_VALIGN = new Map([
+    ['top', 'top'], ['center', 'middle'], ['bottom', 'bottom'],
+]);
+/** The CSS `text-align` keyword for an OOXML `w:jc` value, or `undefined` for a value outside the vocabulary. */
+function textAlignFromJc(jc) {
+    return TEXT_ALIGN_BY_JC.get(jc);
+}
+/** The CSS `vertical-align` keyword for an OOXML `w:vAlign` value, or `undefined` for a value outside the vocabulary. */
+function verticalAlignFromVAlign(vAlign) {
+    return VERTICAL_ALIGN_BY_VALIGN.get(vAlign);
+}
 function parseXml(xmlString) {
     const parser = new DOMParser();
     return parser.parseFromString(xmlString, 'application/xml');
@@ -393,7 +418,7 @@ function parseFontSizeAndColor(rPr, result, themeColors) {
 function parseColorElement(color, themeColors) {
     const val = getAttrVal(color, NS_W, 'val');
     if (val && val !== 'auto')
-        return `#${val}`;
+        return hexColor(val);
     if (!themeColors)
         return undefined;
     const themeColor = getAttrVal(color, NS_W, 'themeColor');
@@ -416,16 +441,20 @@ function applyTintShade(hex, tint, shade) {
     const r = Number.parseInt(hex.substring(1, 3), 16);
     const g = Number.parseInt(hex.substring(3, 5), 16);
     const b = Number.parseInt(hex.substring(5, 7), 16);
-    if (tint) {
-        const t = Number.parseInt(tint, 16) / 255;
+    const t = tint ? hexFraction(tint) : undefined;
+    if (t !== undefined) {
         return rgbToHex(Math.round(r + (255 - r) * t), Math.round(g + (255 - g) * t), Math.round(b + (255 - b) * t));
     }
-    if (shade) {
-        const s = Number.parseInt(shade, 16) / 255;
+    const s = shade ? hexFraction(shade) : undefined;
+    if (s !== undefined) {
         return rgbToHex(Math.round(r * s), Math.round(g * s), Math.round(b * s));
     }
     return hex;
 }
+/** `00`-`FF` as 0-1; `undefined` for a value that is not hex, so a bad tint leaves the colour as it was. */
+function hexFraction(value) {
+    return /^[\dA-Fa-f]{1,2}$/.test(value) ? Number.parseInt(value, 16) / 255 : undefined;
+}
 function rgbToHex(r, g, b) {
     const toHex = (v) => Math.min(255, Math.max(0, v)).toString(16).padStart(2, '0');
     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
@@ -452,15 +481,16 @@ function parseHighlightAndShading(rPr, result) {
     const highlightEl = getChildNS(rPr, NS_W, 'highlight');
     if (highlightEl) {
         const val = getAttrVal(highlightEl, NS_W, 'val');
-        if (val && val !== 'none') {
-            result.highlight = HIGHLIGHT_COLOR_MAP[val] ?? `#${val}`;
-        }
+        // An own-property lookup: `constructor` and `__proto__` are not highlight names.
+        const highlight = val && Object.hasOwn(HIGHLIGHT_COLOR_MAP, val) ? HIGHLIGHT_COLOR_MAP[val] : hexColor(val);
+        if (highlight)
+            result.highlight = highlight;
     }
     const shd = getChildNS(rPr, NS_W, 'shd');
     if (shd) {
-        const fill = getAttrVal(shd, NS_W, 'fill');
-        if (fill && fill !== 'auto')
-            result.backgroundColor = `#${fill}`;
+        const fill = hexColor(getAttrVal(shd, NS_W, 'fill'));
+        if (fill)
+            result.backgroundColor = fill;
     }
 }
 function parseVertAlignAndRtl(rPr, result) {
@@ -549,9 +579,9 @@ function parseParagraphBordersAndShading(pPr) {
     const result = {};
     const shd = getChildNS(pPr, NS_W, 'shd');
     if (shd) {
-        const fill = getAttrVal(shd, NS_W, 'fill');
-        if (fill && fill !== 'auto')
-            result.shading = `#${fill}`;
+        const fill = hexColor(getAttrVal(shd, NS_W, 'fill'));
+        if (fill)
+            result.shading = fill;
     }
     const pBdr = getChildNS(pPr, NS_W, 'pBdr');
     if (pBdr) {
@@ -577,8 +607,7 @@ function parseBorderSet(borderParent) {
 }
 function parseSingleBorder(el) {
     const style = getAttrVal(el, NS_W, 'val') ?? 'single';
-    const colorVal = getAttrVal(el, NS_W, 'color');
-    const color = colorVal && colorVal !== 'auto' ? `#${colorVal}` : '#000000';
+    const color = hexColor(getAttrVal(el, NS_W, 'color')) ?? '#000000';
     const sizeVal = getAttrVal(el, NS_W, 'sz');
     const size = sizeVal ? Number.parseInt(sizeVal, 10) / 8 : 1;
     return { style, color, size };
@@ -616,9 +645,9 @@ function parseBidiAndAlignment(pPr) {
     }
     const jcEl = getChildNS(pPr, NS_W, 'jc');
     if (jcEl) {
-        const val = getAttrVal(jcEl, NS_W, 'val');
-        if (val)
-            result.alignment = val;
+        const alignment = textAlignFromJc(getAttrVal(jcEl, NS_W, 'val') ?? '');
+        if (alignment)
+            result.alignment = alignment;
     }
     return result;
 }
@@ -968,17 +997,17 @@ function buildCellStyle(tcPr) {
     let hasStyle = false;
     const shd = getChildNS(tcPr, NS_W, 'shd');
     if (shd) {
-        const fill = getAttrVal(shd, NS_W, 'fill');
-        if (fill && fill !== 'auto') {
-            style.backgroundColor = `#${fill}`;
+        const fill = hexColor(getAttrVal(shd, NS_W, 'fill'));
+        if (fill) {
+            style.backgroundColor = fill;
             hasStyle = true;
         }
     }
     const vAlign = getChildNS(tcPr, NS_W, 'vAlign');
     if (vAlign) {
-        const val = getAttrVal(vAlign, NS_W, 'val');
-        if (val) {
-            style.verticalAlign = val;
+        const verticalAlign = verticalAlignFromVAlign(getAttrVal(vAlign, NS_W, 'val') ?? '');
+        if (verticalAlign) {
+            style.verticalAlign = verticalAlign;
             hasStyle = true;
         }
     }
@@ -1225,14 +1254,10 @@ function parseThemeColors(files) {
         if (!el)
             continue;
         const srgb = getChildNS(el, NS_A, 'srgbClr');
-        if (srgb) {
-            map.set(name, `#${srgb.getAttribute('val') ?? '000000'}`);
-            continue;
-        }
         const sys = getChildNS(el, NS_A, 'sysClr');
-        if (sys) {
-            map.set(name, `#${sys.getAttribute('lastClr') ?? sys.getAttribute('val') ?? '000000'}`);
-        }
+        const hex = hexColor(srgb ? srgb.getAttribute('val') : sys?.getAttribute('lastClr'));
+        if (hex)
+            map.set(name, hex);
     }
     return map;
 }
@@ -1370,9 +1395,9 @@ function extractParagraphStyleProps(pPr) {
     const result = {};
     const jcEl = getChildNS(pPr, NS_W, 'jc');
     if (jcEl) {
-        const val = getAttrVal(jcEl, NS_W, 'val');
-        if (val)
-            result.alignment = val;
+        const alignment = textAlignFromJc(getAttrVal(jcEl, NS_W, 'val') ?? '');
+        if (alignment)
+            result.alignment = alignment;
     }
     extractSpacingProps(pPr, result);
     extractIndentProps(pPr, result);
@@ -1524,5 +1549,5 @@ function parseDocx(data) {
     return { elements, plainText, footnotes, endnotes, comments, headers, footers };
 }
 
-export { parseDocx };
-//# sourceMappingURL=gilav21-shadcn-angular-rte-docx-parser-B8BeJWtY.mjs.map
+export { parseDocx, textAlignFromJc, verticalAlignFromVAlign };
+//# sourceMappingURL=gilav21-shadcn-angular-rte-docx-parser-DiBPweI4.mjs.map