Inline text formatting

assets/src/edit-story/components/panels/test/textStyle.js

@@ -391,7 +391,15 @@ describe('Panels/TextStyle', () => {
     it('should select font weight', () => {
       const { pushUpdate } = renderTextStyle([textElement]);
       act(() => controls['font.weight'].onChange('300'));
-      expect(pushUpdate).toHaveBeenCalledWith({ fontWeight: 300 }, true);
+      const updatingFunction = pushUpdate.mock.calls[0][0];
+      const resultOfUpdating = updatingFunction({ content: 'Hello world' });
+      expect(resultOfUpdating).toStrictEqual(
+        {
+          content:
+            '<span class="weight" style="font-weight: 300">Hello world</span>',
+        },
+        true
+      );
     });
 
     it('should select font size', () => {

assets/src/edit-story/components/panels/textStyle/font.js

@@ -33,6 +33,7 @@ import { Numeric, Row, DropDown } from '../../form';
 import { PAGE_HEIGHT } from '../../../constants';
 import { useFont } from '../../../app/font';
 import { getCommonValue } from '../utils';
+import useRichTextFormatting from './useRichTextFormatting';
 
 const Space = styled.div`
   flex: 0 0 10px;
@@ -46,7 +47,11 @@ const BoxedNumeric = styled(Numeric)`
 function FontControls({ selectedElements, pushUpdate }) {
   const fontFamily = getCommonValue(selectedElements, 'fontFamily');
   const fontSize = getCommonValue(selectedElements, 'fontSize');
-  const fontWeight = getCommonValue(selectedElements, 'fontWeight');
+
+  const {
+    textInfo: { fontWeight },
+    handlers: { handleSelectFontWeight },
+  } = useRichTextFormatting(selectedElements, pushUpdate);
 
   const {
     state: { fonts },
@@ -103,9 +108,7 @@ function FontControls({ selectedElements, pushUpdate }) {
               ariaLabel={__('Font weight', 'web-stories')}
               options={fontWeights}
               value={fontWeight}
-              onChange={(value) =>
-                pushUpdate({ fontWeight: parseInt(value) }, true)
-              }
+              onChange={handleSelectFontWeight}
             />
             <Space />
           </>

assets/src/edit-story/components/panels/textStyle/textStyle.js

@@ -40,6 +40,7 @@ import { ReactComponent as BoldIcon } from '../../../icons/bold_icon.svg';
 import { ReactComponent as ItalicIcon } from '../../../icons/italic_icon.svg';
 import { ReactComponent as UnderlineIcon } from '../../../icons/underline_icon.svg';
 import { getCommonValue } from '../utils';
+import useRichTextFormatting from './useRichTextFormatting';
 
 const BoxedNumeric = styled(Numeric)`
   padding: 6px 6px;
@@ -64,9 +65,11 @@ function StylePanel({ selectedElements, pushUpdate }) {
   const textAlign = getCommonValue(selectedElements, 'textAlign');
   const letterSpacing = getCommonValue(selectedElements, 'letterSpacing');
   const lineHeight = getCommonValue(selectedElements, 'lineHeight');
-  const fontStyle = getCommonValue(selectedElements, 'fontStyle');
-  const textDecoration = getCommonValue(selectedElements, 'textDecoration');
-  const bold = getCommonValue(selectedElements, 'bold');
+
+  const {
+    textInfo: { isBold, isItalic, isUnderline },
+    handlers: { handleClickBold, handleClickItalic, handleClickUnderline },
+  } = useRichTextFormatting(selectedElements, pushUpdate);
 
   return (
     <>
@@ -128,28 +131,24 @@ function StylePanel({ selectedElements, pushUpdate }) {
         />
         <ToggleButton
           icon={<BoldIcon />}
-          value={bold === true}
+          value={isBold}
           iconWidth={9}
           iconHeight={10}
-          onChange={(value) => pushUpdate({ bold: value }, true)}
+          onChange={handleClickBold}
         />
         <ToggleButton
           icon={<ItalicIcon />}
-          value={fontStyle === 'italic'}
+          value={isItalic}
           iconWidth={10}
           iconHeight={10}
-          onChange={(value) =>
-            pushUpdate({ fontStyle: value ? 'italic' : 'normal' }, true)
-          }
+          onChange={handleClickItalic}
         />
         <ToggleButton
           icon={<UnderlineIcon />}
-          value={textDecoration === 'underline'}
+          value={isUnderline}
           iconWidth={8}
           iconHeight={21}
-          onChange={(value) =>
-            pushUpdate({ textDecoration: value ? 'underline' : 'none' }, true)
-          }
+          onChange={handleClickUnderline}
         />
       </Row>
     </>

assets/src/edit-story/components/panels/textStyle/useRichTextFormatting.js

@@ -0,0 +1,113 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { useMemo, useCallback } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import useRichText from '../../richText/useRichText';
+import {
+  getHTMLInfo,
+  toggleBoldInHTML,
+  setFontWeightInHTML,
+  toggleItalicInHTML,
+  toggleUnderlineInHTML,
+} from '../../richText/htmlManipulation';
+import { MULTIPLE_VALUE } from '../../form';
+
+function reduceWithMultiple(reduced, info) {
+  return Object.fromEntries(
+    Object.keys(info).map((key) => {
+      const wasMultiple = reduced[key] === MULTIPLE_VALUE;
+      const hadValue = typeof reduced[key] !== 'undefined';
+      const areDifferent = hadValue && reduced[key] !== info[key];
+      if (wasMultiple || areDifferent) {
+        return [key, MULTIPLE_VALUE];
+      }
+      return [key, info[key]];
+    })
+  );
+}
+
+function useRichTextFormatting(selectedElements, pushUpdate) {
+  const {
+    state: { hasCurrentEditor, selectionInfo },
+    actions: {
+      toggleBoldInSelection,
+      setFontWeightInSelection,
+      toggleItalicInSelection,
+      toggleUnderlineInSelection,
+    },
+  } = useRichText();
+
+  const textInfo = useMemo(() => {
+    if (hasCurrentEditor) {
+      return selectionInfo;
+    }
+
+    // loop over all elements, find info for content and reduce to common value
+    // (setting MULTIPLE_VALUE appropriately)
+    return selectedElements
+      .map(({ content }) => content)
+      .map(getHTMLInfo)
+      .reduce(reduceWithMultiple, {});
+  }, [hasCurrentEditor, selectionInfo, selectedElements]);
+
+  const push = useCallback(
+    (updater, ...args) =>
+      pushUpdate(
+        ({ content }) => ({ content: updater(content, ...args) }),
+        true
+      ),
+    [pushUpdate]
+  );
+
+  const handlers = useMemo(() => {
+    if (hasCurrentEditor) {
+      return {
+        handleClickBold: toggleBoldInSelection,
+        handleSelectFontWeight: setFontWeightInSelection,
+        handleClickItalic: toggleItalicInSelection,
+        handleClickUnderline: toggleUnderlineInSelection,
+      };
+    }
+
+    return {
+      handleClickBold: (flag) => push(toggleBoldInHTML, flag),
+      handleSelectFontWeight: (weight) => push(setFontWeightInHTML, weight),
+      handleClickItalic: (flag) => push(toggleItalicInHTML, flag),
+      handleClickUnderline: (flag) => push(toggleUnderlineInHTML, flag),
+    };
+  }, [
+    hasCurrentEditor,
+    toggleBoldInSelection,
+    setFontWeightInSelection,
+    toggleItalicInSelection,
+    toggleUnderlineInSelection,
+    push,
+  ]);
+
+  return {
+    textInfo,
+    handlers,
+  };
+}
+
+export default useRichTextFormatting;

assets/src/edit-story/components/richText/context.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { createContext } from 'react';
+
+const RichTextContext = createContext({ state: {}, actions: {} });
+
+export default RichTextContext;

assets/src/edit-story/components/richText/customConstants.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const NONE = 'NONE';
+export const ITALIC = 'CUSTOM-ITALIC';
+export const UNDERLINE = 'CUSTOM-UNDERLINE';
+export const WEIGHT = 'CUSTOM-WEIGHT';
+export const COLOR = 'CUSTOM-COLOR';
+export const LETTERSPACING = 'CUSTOM-LETTERSPACING';
+
+export const NORMAL_WEIGHT = 400;
+export const SMALLEST_BOLD = 600;
+export const DEFAULT_BOLD = 700;
+
+export const weightToStyle = (weight) => `${WEIGHT}-${weight}`;
+export const colorToStyle = (color) => `${COLOR}-${color}`;
+export const lsToStyle = (ls) => `${LETTERSPACING}-${ls}`;
+
+export const isStyle = (style, prefix) =>
+  typeof style === 'string' && style.startsWith(prefix);
+export const getVariable = (style, prefix) => style.slice(prefix.length + 1);
+
+export const styleToWeight = (style) =>
+  isStyle(style, WEIGHT) ? parseInt(getVariable(style, WEIGHT)) : null;
+export const styleToColor = (style) =>
+  isStyle(style, COLOR) ? getVariable(style, COLOR) : null;
+export const styleToLs = (style) =>
+  isStyle(style, LETTERSPACING)
+    ? parseInt(getVariable(style, LETTERSPACING))
+    : null;

assets/src/edit-story/components/richText/customExport.js

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { stateToHTML } from 'draft-js-export-html';
+
+/**
+ * Internal dependencies
+ */
+import { styleToWeight, ITALIC, UNDERLINE } from './customConstants';
+
+function inlineStyleFn(styles) {
+  const inline = styles.toArray().reduce(
+    ({ classes, css }, style) => {
+      // Italic
+      if (style === ITALIC) {
+        return {
+          classes: [...classes, 'italic'],
+          css: { ...css, fontStyle: 'italic' },
+        };
+      }
+
+      // Underline
+      if (style === UNDERLINE) {
+        return {
+          classes: [...classes, 'underline'],
+          css: { ...css, textDecoration: 'underline' },
+        };
+      }
+
+      // Weight
+      const weight = styleToWeight(style);
+      if (weight) {
+        return {
+          classes: [...classes, 'weight'],
+          css: { ...css, fontWeight: weight },
+        };
+      }
+
+      // TODO: Color
+      // TODO: Letter spacing
+
+      return { classes, css };
+    },
+    { classes: [], css: {} }
+  );
+
+  if (inline.classes.length === 0) {
+    return null;
+  }
+
+  return {
+    element: 'span',
+    attributes: { class: inline.classes.join(' ') },
+    style: inline.css,
+  };
+}
+
+function exportHTML(editorState) {
+  if (!editorState) {
+    return null;
+  }
+
+  const html = stateToHTML(editorState.getCurrentContent(), {
+    inlineStyleFn,
+    defaultBlockTag: null,
+  });
+
+  return html.replace(/<br ?\/?>/g, '').replace(/&nbsp;$/, '');
+}
+
+export default exportHTML;