update editor (#935)

- always show `AddCommentBox` & `ShowCommentsButton` - sidebar appears beside text - move `showComments` to toolbar - also `npm audit fix`
paranext · Jun 12, 2024 · f67150b · f67150b
1 parent fb1ee0c
commit f67150b
Show file tree

Hide file tree

Showing 5 changed files with 370 additions and 352 deletions.
diff --git a/extensions/src/platform-scripture-editor/package.json b/extensions/src/platform-scripture-editor/package.json
@@ -35,7 +35,8 @@
     "platform-bible-utils": "file:../../../lib/platform-bible-utils"
   },
   "devDependencies": {
-    "@biblionexus-foundation/platform-editor": "^0.3.0",
+    "@biblionexus-foundation/platform-editor": "^0.3.2",
+    "@biblionexus-foundation/scripture-utilities": "^0.0.2",
     "@swc/core": "^1.4.11",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.73",

diff --git a/extensions/src/platform-scripture-editor/src/_commenting.scss b/extensions/src/platform-scripture-editor/src/_commenting.scss
@@ -171,12 +171,6 @@ i.add-comment {
   background-image: url("/assets/images/icons/chat-left-text.svg");
 }
 
-@media (max-width: 1024px) {
-  .CommentPlugin_AddCommentBox {
-    display: none;
-  }
-}
-
 .CommentPlugin_CommentInputBox {
   display: block;
   position: absolute;
@@ -275,10 +269,11 @@ i.add-comment {
 }
 
 .CommentPlugin_ShowCommentsButton {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  background-color: #ddd;
+  padding-top: 6px;
+  padding-bottom: 7px;
+  padding-left: 13px;
+  padding-right: 13px;
+  background-color: inherit;
   border-radius: 10px;
 }
 
@@ -294,12 +289,6 @@ i.comments {
   transition: opacity 0.2s linear;
 }
 
-@media (max-width: 1024px) {
-  .CommentPlugin_ShowCommentsButton {
-    display: none;
-  }
-}
-
 /* stylelint-disable-next-line selector-no-qualifying-type */
 .CommentPlugin_ShowCommentsButton:hover i.comments {
   opacity: 1;
@@ -310,16 +299,12 @@ i.comments {
 }
 
 .CommentPlugin_CommentsPanel {
-  position: fixed;
-  right: 0;
   width: 300px;
-  height: calc(100% - 88px);
-  top: 88px;
+  height: 100%;
   background-color: #fff;
   border-top-left-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   animation: show-comments 0.2s ease;
-  z-index: 25;
 }
 
 @keyframes show-comments {
@@ -414,14 +399,14 @@ i.send {
   top: calc(50% - 15px);
   margin: 0;
   padding: 0;
-  width: 100%;
+  width: inherit;
 }
 
 .CommentPlugin_CommentsPanel_List {
   list-style-type: none;
   margin: 0;
   padding: 0;
-  width: 100%;
+  width: inherit;
   position: absolute;
   top: 45px;
   overflow-y: auto;

diff --git a/extensions/src/platform-scripture-editor/src/_editor.scss b/extensions/src/platform-scripture-editor/src/_editor.scss
@@ -18,6 +18,7 @@
 .editor-inner {
   background: #fff;
   position: relative;
+  display: flex;
 }
 
 .editor-input {
@@ -29,6 +30,7 @@
   outline: 0;
   padding: 15px 10px;
   caret-color: #444;
+  flex: auto;
 }
 
 .editor-placeholder {

diff --git a/extensions/src/platform-scripture-editor/src/platform-scripture-editor.web-view.tsx b/extensions/src/platform-scripture-editor/src/platform-scripture-editor.web-view.tsx
@@ -4,10 +4,8 @@ import {
   EditorRef,
   Marginal,
   MarginalRef,
-  Usj,
-  usjToUsxString,
-  usxStringToUsj,
 } from '@biblionexus-foundation/platform-editor';
+import { Usj, usjToUsxString, usxStringToUsj } from '@biblionexus-foundation/scripture-utilities';
 import { VerseRef } from '@sillsdev/scripture';
 import { JSX, useCallback, useEffect, useMemo, useRef } from 'react';
 import type { WebViewProps } from '@papi/core';