chore(web): add line-height option to story text block (#703)

web/src/beta/lib/lexical/RichTextEditor/index.css

@@ -685,6 +685,11 @@
   min-width: unset;
 }
 
+.lexical .dropdown .item.lineheight-item,
+.lexical .dropdown .item.lineheight-item .text {
+  min-width: unset;
+}
+
 .lexical .dropdown .item .active {
   display: flex;
   width: 20px;
@@ -795,6 +800,10 @@
   background-image: url(images/icons/code.svg);
 }
 
+.lexical .icon.lineheight {
+  background-image: url(images/icons/regular.svg);
+}
+
 .lexical .switches {
   z-index: 6;
   position: fixed;

web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx

@@ -90,6 +90,20 @@ const FONT_SIZE_OPTIONS: [string, string][] = [
   ["20px", "20px"],
 ];
 
+const LINE_HEIGHT_OPTIONS: [string, string][] = [
+  ["1.0", "1.0"],
+  ["1.1", "1.1"],
+  ["1.2", "1.2"],
+  ["1.3", "1.3"],
+  ["1.4", "1.4"],
+  ["1.5", "1.5"],
+  ["1.6", "1.6"],
+  ["1.7", "1.7"],
+  ["1.8", "1.8"],
+  ["1.9", "1.9"],
+  ["2.0", "2.0"],
+];
+
 function dropDownActiveClass(active: boolean) {
   if (active) return "active dropdown-item-active";
   else return "";
@@ -278,6 +292,56 @@ function FontDropDown({
   );
 }
 
+function LineHeightDropDown({
+  containerRef,
+  scrollableContainerId,
+  editor,
+  value,
+  style,
+  disabled = false,
+}: {
+  containerRef: RefObject<HTMLDivElement>;
+  scrollableContainerId?: string;
+  editor: LexicalEditor;
+  value: string;
+  style: string;
+  disabled?: boolean;
+}): JSX.Element {
+  const t = useT();
+  const handleClick = useCallback(
+    (option: string) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $patchStyleText(selection, {
+            [style]: option,
+          });
+        }
+      });
+    },
+    [editor, style],
+  );
+
+  return (
+    <DropDown
+      containerRef={containerRef}
+      scrollableContainerId={scrollableContainerId}
+      disabled={disabled}
+      buttonClassName={"toolbar-item " + style}
+      buttonIconClassName={"icon block-type lineheight"}
+      buttonAriaLabel={t("Formatting options for line height")}>
+      {LINE_HEIGHT_OPTIONS.map(([option, text]) => (
+        <DropDownItem
+          className={`item ${dropDownActiveClass(value === option)} ${"lineheight-item"}`}
+          onClick={() => handleClick(option)}
+          key={option}>
+          <span className="text">{text}</span>
+        </DropDownItem>
+      ))}
+    </DropDown>
+  );
+}
+
 function ElementFormatDropdown({
   containerRef,
   scrollableContainerId,
@@ -324,8 +388,8 @@ function ElementFormatDropdown({
       containerRef={containerRef}
       scrollableContainerId={scrollableContainerId}
       disabled={disabled}
-      buttonLabel={formatOptions[value].name}
-      buttonIconClassName={`icon ${formatOptions[value].icon}`}
+      buttonLabel={formatOptions[value]?.name}
+      buttonIconClassName={`icon ${formatOptions[value]?.icon}`}
       buttonClassName="toolbar-item spaced alignment"
       buttonAriaLabel="Formatting options for text alignment">
       <DropDownItem
@@ -394,6 +458,7 @@ export default function ToolbarPlugin({
   const [rootType, setRootType] = useState<keyof typeof rootTypeToRootName>("root");
   const [fontSize, setFontSize] = useState<string>("15px");
   const [fontColor, setFontColor] = useState<string>("#000");
+  const [lineHeight, setLineHeight] = useState<string>("1.2");
   const [bgColor, setBgColor] = useState<string>("#fff");
   const [fontFamily, setFontFamily] = useState<string>("Arial");
   const [elementFormat, setElementFormat] = useState<ElementFormatType>("left");
@@ -488,6 +553,7 @@ export default function ToolbarPlugin({
       setFontColor($getSelectionStyleValueForProperty(selection, "color", "#000"));
       setBgColor($getSelectionStyleValueForProperty(selection, "background-color", "#fff"));
       setFontFamily($getSelectionStyleValueForProperty(selection, "font-family", "Arial"));
+      setLineHeight($getSelectionStyleValueForProperty(selection, "line-height", "1.2"));
       setElementFormat(
         ($isElementNode(node) ? node.getFormatType() : parent?.getFormatType()) || "left",
       );
@@ -693,6 +759,14 @@ export default function ToolbarPlugin({
           value={fontSize}
           editor={editor}
         />
+        <LineHeightDropDown
+          containerRef={containerRef}
+          scrollableContainerId={scrollableContainerId}
+          disabled={!isEditable}
+          style={"line-height"}
+          value={lineHeight}
+          editor={editor}
+        />
         <Divider />
       </div>
 

web/src/services/i18n/translations/en.yml

@@ -39,9 +39,9 @@ Value: ''
 Description around.: ''
 Write down your text: ''
 Add to Layer: ''
-Choose layer to add: 'Choose layer to add'
-Layer of the data source you want to add.: 'Layer of the data source you want to add'
-layer name: 'Layer name'
+Choose layer to add: Choose layer to add
+Layer of the data source you want to add.: Layer of the data source you want to add
+layer name: Layer name
 Layer: Layer
 Scene: Scene
 Main: ''
@@ -201,6 +201,7 @@ Numbered List: Numbered List
 Quote: Quote
 Formatting options for font family: Formatting options for font family
 Formatting options for font size: Formatting options for font size
+Formatting options for line height: Formatting options for line height
 Center Align: Center Align
 Justify Align: Justify Align
 Left Align: Left Align

web/src/services/i18n/translations/ja.yml

@@ -182,6 +182,7 @@ Numbered List: ''
 Quote: ''
 Formatting options for font family: ''
 Formatting options for font size: ''
+Formatting options for line height: ''
 Center Align: ''
 Justify Align: ''
 Left Align: ''