From fcf04f28f6169019c09d32068f388f034c51684b Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Tue, 26 Sep 2023 13:49:23 +0800
Subject: [PATCH] chore(web): add line-height option to story text block (#703)

---
 .../RichTextEditor/images/icons/regular.svg   |  9 +++
 .../beta/lib/lexical/RichTextEditor/index.css |  9 +++
 .../RichTextEditor/plugins/ToolbarPlugin.tsx  | 78 ++++++++++++++++++-
 web/src/services/i18n/translations/en.yml     |  7 +-
 web/src/services/i18n/translations/ja.yml     |  1 +
 5 files changed, 99 insertions(+), 5 deletions(-)
 create mode 100644 web/src/beta/lib/lexical/RichTextEditor/images/icons/regular.svg

diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/regular.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/regular.svg
new file mode 100644
index 0000000000..39afa028d7
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/regular.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12V4" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 6L4.00003 4L6 5.99965" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 10L4.00003 12L6 10.0003" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 4H14" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 6.5H14" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 9.5H14" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 12H14" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/beta/lib/lexical/RichTextEditor/index.css b/web/src/beta/lib/lexical/RichTextEditor/index.css
index 4d5e59ec99..6e707f7578 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/index.css
+++ b/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;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
index 6258e43767..bb53d08b46 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
+++ b/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>
 
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 4952d37e8b..6ef5da6a0a 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/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
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index 21d17f1b19..8de51881bc 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/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: ''