Bump 8.39.1 (#1453)

* WIP * get biggest z index * comment * refactor * refactor * refactor * refactor * refactor * refactor * refactor * refactor and comments * refactor * Improve handling of quotes inside lists (#1438) * Remove coloring when removing a quote inside a LI * Prevent list items from being removed before quote * refactor * Content Model Support PRE and CODE: step 1 (#1439) * Support PRE and CODE: step 1 * improve * Content Model Support PRE and CODE: step 2 (#1440) * Support PRE and CODE: step 1 * improve * Support PRE and CODE step 2 * Fix issue when cell resizing with merged cells (#1445) * init * Fix * Content Model Support PRE and CODE: step 3 (#1441) * Support PRE and CODE: step 1 * improve * Support PRE and CODE step 2 * Support PRE and CODE: step 3 * fix markdown feature * fix test * Content Model Support PRE and CODE: step 4 (#1442) * Support PRE and CODE: step 1 * improve * Support PRE and CODE step 2 * Support PRE and CODE: step 3 * Support PRE and CODE: step 4 * Allow styled table header cells to be clear formatted (#1447) * Consider nodes with siblings with no text as empty * Cleanup * Fix background color issue that can go across block element (#1448) * Fix Unhandled Rejection: Error: Editor is already disposed (#1449) * Fix issue * fix test * Fix #1443: Support CSS style word-break in ContentModel for table cell (#1451) * Fix #1443 * fix build * fix test * Bump * bump content model Co-authored-by: Júlia Roldi <juliaroldi@microsoft.com> Co-authored-by: Julia Roldi <87443959+juliaroldi@users.noreply.github.com> Co-authored-by: Jiuqing Song <jisong@microsoft.com> Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>
microsoft · Dec 2, 2022 · 20e3a02 · 20e3a02
1 parent 2db3a4f
commit 20e3a02
Show file tree

Hide file tree

Showing 13 changed files with 785 additions and 669 deletions.
diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/WordBreakFormatRenderer.ts b/demo/scripts/controls/contentModel/components/format/formatPart/WordBreakFormatRenderer.ts
@@ -0,0 +1,8 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { WordBreakFormat } from 'roosterjs-content-model';
+
+export const WordBreakFormatRenderer = createTextFormatRenderer<WordBreakFormat>(
+    'Word break',
+    format => format.wordBreak,
+    (format, value) => (format.wordBreak = value)
+);
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx
@@ -1,125 +1,127 @@
-import * as React from 'react';
-import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
-import { BlockGroupContentView } from './BlockGroupContentView';
-import { BorderBoxFormatRenderer } from '../format/formatPart/BorderBoxFormatRenderer';
-import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
-import { ContentModelView } from '../ContentModelView';
-import { DirectionFormatRenderers } from '../format/formatPart/DirectionFormatRenderers';
-import { FormatRenderer } from '../format/utils/FormatRenderer';
-import { FormatView } from '../format/FormatView';
-import { MetadataView } from '../format/MetadataView';
-import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
-import { TableCellMetadataFormatRender } from '../format/formatPart/TableCellMetadataFormatRender';
-import { updateTableCellMetadata } from 'roosterjs-content-model/lib/modelApi/metadata/updateTableCellMetadata';
-import { useProperty } from '../../hooks/useProperty';
-import { VerticalAlignFormatRenderer } from '../format/formatPart/VerticalAlignFormatRenderer';
-import {
-    ContentModelTableCell,
-    ContentModelTableCellFormat,
-    hasSelectionInBlockGroup,
-} from 'roosterjs-content-model';
-
-const styles = require('./ContentModelTableCellView.scss');
-
-const TableCellFormatRenderers: FormatRenderer<ContentModelTableCellFormat>[] = [
-    ...BorderFormatRenderers,
-    ...DirectionFormatRenderers,
-    BorderBoxFormatRenderer,
-    BackgroundColorFormatRenderer,
-    PaddingFormatRenderer,
-    VerticalAlignFormatRenderer,
-];
-
-export function ContentModelTableCellView(props: { cell: ContentModelTableCell }) {
-    const { cell } = props;
-    const checkboxHeader = React.useRef<HTMLInputElement>(null);
-    const checkboxSpanLeft = React.useRef<HTMLInputElement>(null);
-    const checkboxSpanAbove = React.useRef<HTMLInputElement>(null);
-    const [isHeader, setIsHeader] = useProperty(cell.isHeader);
-    const [spanLeft, setSpanLeft] = useProperty(cell.spanLeft);
-    const [spanAbove, setSpanAbove] = useProperty(cell.spanAbove);
-
-    const onHeaderChanged = React.useCallback(() => {
-        const value = checkboxHeader.current.checked;
-        cell.isHeader = value;
-        setIsHeader(value);
-    }, [cell, setIsHeader]);
-
-    const onSpanLeftChanged = React.useCallback(() => {
-        const value = checkboxSpanLeft.current.checked;
-        cell.spanLeft = value;
-        setSpanLeft(value);
-    }, [cell, setSpanLeft]);
-
-    const onSpanAboveChanged = React.useCallback(() => {
-        const value = checkboxSpanAbove.current.checked;
-        cell.spanAbove = value;
-        setSpanAbove(value);
-    }, [cell, setSpanAbove]);
-
-    const getContent = React.useCallback(() => {
-        return (
-            <>
-                <div>
-                    <input
-                        type="checkbox"
-                        checked={isHeader}
-                        ref={checkboxHeader}
-                        onChange={onHeaderChanged}
-                    />
-                    Header
-                </div>
-                <div>
-                    <input
-                        type="checkbox"
-                        checked={spanLeft}
-                        ref={checkboxSpanLeft}
-                        onChange={onSpanLeftChanged}
-                    />
-                    Span Left
-                </div>
-                <div>
-                    <input
-                        type="checkbox"
-                        checked={spanAbove}
-                        ref={checkboxSpanAbove}
-                        onChange={onSpanAboveChanged}
-                    />
-                    Span Above
-                </div>
-                <BlockGroupContentView group={cell} />
-            </>
-        );
-    }, [cell, isHeader, spanAbove, spanLeft]);
-
-    const getMetadata = React.useCallback(() => {
-        return (
-            <MetadataView
-                model={cell}
-                renderers={[TableCellMetadataFormatRender]}
-                updater={updateTableCellMetadata}
-            />
-        );
-    }, [cell]);
-
-    const getFormat = React.useCallback(() => {
-        return <FormatView format={cell.format} renderers={TableCellFormatRenderers} />;
-    }, [cell.format]);
-
-    const subTitle =
-        cell.spanAbove && cell.spanLeft ? '↖' : cell.spanLeft ? '←' : cell.spanAbove ? '↑' : '';
-
-    return (
-        <ContentModelView
-            title={isHeader ? 'TableCellHeader' : 'TableCell'}
-            subTitle={subTitle}
-            className={styles.modelTableCell}
-            hasSelection={hasSelectionInBlockGroup(cell)}
-            isSelected={cell.isSelected}
-            jsonSource={cell}
-            getContent={getContent}
-            getFormat={getFormat}
-            getMetadata={getMetadata}
-        />
-    );
-}
+import * as React from 'react';
+import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
+import { BlockGroupContentView } from './BlockGroupContentView';
+import { BorderBoxFormatRenderer } from '../format/formatPart/BorderBoxFormatRenderer';
+import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
+import { ContentModelView } from '../ContentModelView';
+import { DirectionFormatRenderers } from '../format/formatPart/DirectionFormatRenderers';
+import { FormatRenderer } from '../format/utils/FormatRenderer';
+import { FormatView } from '../format/FormatView';
+import { MetadataView } from '../format/MetadataView';
+import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
+import { TableCellMetadataFormatRender } from '../format/formatPart/TableCellMetadataFormatRender';
+import { updateTableCellMetadata } from 'roosterjs-content-model/lib/modelApi/metadata/updateTableCellMetadata';
+import { useProperty } from '../../hooks/useProperty';
+import { VerticalAlignFormatRenderer } from '../format/formatPart/VerticalAlignFormatRenderer';
+import { WordBreakFormatRenderer } from '../format/formatPart/WordBreakFormatRenderer';
+import {
+    ContentModelTableCell,
+    ContentModelTableCellFormat,
+    hasSelectionInBlockGroup,
+} from 'roosterjs-content-model';
+
+const styles = require('./ContentModelTableCellView.scss');
+
+const TableCellFormatRenderers: FormatRenderer<ContentModelTableCellFormat>[] = [
+    ...BorderFormatRenderers,
+    ...DirectionFormatRenderers,
+    BorderBoxFormatRenderer,
+    BackgroundColorFormatRenderer,
+    PaddingFormatRenderer,
+    VerticalAlignFormatRenderer,
+    WordBreakFormatRenderer,
+];
+
+export function ContentModelTableCellView(props: { cell: ContentModelTableCell }) {
+    const { cell } = props;
+    const checkboxHeader = React.useRef<HTMLInputElement>(null);
+    const checkboxSpanLeft = React.useRef<HTMLInputElement>(null);
+    const checkboxSpanAbove = React.useRef<HTMLInputElement>(null);
+    const [isHeader, setIsHeader] = useProperty(cell.isHeader);
+    const [spanLeft, setSpanLeft] = useProperty(cell.spanLeft);
+    const [spanAbove, setSpanAbove] = useProperty(cell.spanAbove);
+
+    const onHeaderChanged = React.useCallback(() => {
+        const value = checkboxHeader.current.checked;
+        cell.isHeader = value;
+        setIsHeader(value);
+    }, [cell, setIsHeader]);
+
+    const onSpanLeftChanged = React.useCallback(() => {
+        const value = checkboxSpanLeft.current.checked;
+        cell.spanLeft = value;
+        setSpanLeft(value);
+    }, [cell, setSpanLeft]);
+
+    const onSpanAboveChanged = React.useCallback(() => {
+        const value = checkboxSpanAbove.current.checked;
+        cell.spanAbove = value;
+        setSpanAbove(value);
+    }, [cell, setSpanAbove]);
+
+    const getContent = React.useCallback(() => {
+        return (
+            <>
+                <div>
+                    <input
+                        type="checkbox"
+                        checked={isHeader}
+                        ref={checkboxHeader}
+                        onChange={onHeaderChanged}
+                    />
+                    Header
+                </div>
+                <div>
+                    <input
+                        type="checkbox"
+                        checked={spanLeft}
+                        ref={checkboxSpanLeft}
+                        onChange={onSpanLeftChanged}
+                    />
+                    Span Left
+                </div>
+                <div>
+                    <input
+                        type="checkbox"
+                        checked={spanAbove}
+                        ref={checkboxSpanAbove}
+                        onChange={onSpanAboveChanged}
+                    />
+                    Span Above
+                </div>
+                <BlockGroupContentView group={cell} />
+            </>
+        );
+    }, [cell, isHeader, spanAbove, spanLeft]);
+
+    const getMetadata = React.useCallback(() => {
+        return (
+            <MetadataView
+                model={cell}
+                renderers={[TableCellMetadataFormatRender]}
+                updater={updateTableCellMetadata}
+            />
+        );
+    }, [cell]);
+
+    const getFormat = React.useCallback(() => {
+        return <FormatView format={cell.format} renderers={TableCellFormatRenderers} />;
+    }, [cell.format]);
+
+    const subTitle =
+        cell.spanAbove && cell.spanLeft ? '↖' : cell.spanLeft ? '←' : cell.spanAbove ? '↑' : '';
+
+    return (
+        <ContentModelView
+            title={isHeader ? 'TableCellHeader' : 'TableCell'}
+            subTitle={subTitle}
+            className={styles.modelTableCell}
+            hasSelection={hasSelectionInBlockGroup(cell)}
+            isSelected={cell.isSelected}
+            jsonSource={cell}
+            getContent={getContent}
+            getFormat={getFormat}
+            getMetadata={getMetadata}
+        />
+    );
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.39.0",
+    "version": "8.39.1",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/common/wordBreakFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/common/wordBreakFormatHandler.ts
@@ -0,0 +1,20 @@
+import { FormatHandler } from '../FormatHandler';
+import { WordBreakFormat } from '../../publicTypes/format/formatParts/WordBreakFormat';
+
+/**
+ * @internal
+ */
+export const wordBreakFormatHandler: FormatHandler<WordBreakFormat> = {
+    parse: (format, element, _, defaultStyle) => {
+        const wordBreak = element.style.wordBreak || defaultStyle.wordBreak;
+
+        if (wordBreak) {
+            format.wordBreak = wordBreak;
+        }
+    },
+    apply: (format, element) => {
+        if (format.wordBreak) {
+            element.style.wordBreak = format.wordBreak;
+        }
+    },
+};