only show slate editor toolbar when clicking "..."

- this also meant fixing an issue with the frame context for chatrooms

Author: williamstein

src/packages/frontend/chat/chat-log.tsx

@@ -218,7 +218,7 @@ export function ChatLog({
     <>
       {visibleHashtags.size > 0 && (
         <HashtagBar
-          style={{ margin: "5px 15px 0 15px" }}
+          style={{ margin: "5px 15px 15px 15px" }}
           actions={{
             set_hashtag_state: (tag, state) => {
               actions.setHashtagState(tag, state);

src/packages/frontend/chat/chatroom.tsx

@@ -10,15 +10,13 @@ import { FormattedMessage } from "react-intl";
 import { Col, Row, Well } from "@cocalc/frontend/antd-bootstrap";
 import {
   React,
-  redux,
   useEditorRedux,
   useEffect,
   useRef,
   useState,
 } from "@cocalc/frontend/app-framework";
 import { Icon, Loading } from "@cocalc/frontend/components";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
-import { FrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { hoursToTimeIntervalHuman } from "@cocalc/util/misc";
 import { EditorComponentProps } from "../frame-editors/frame-tree/types";
 import { ChatLog } from "./chat-log";
@@ -67,7 +65,6 @@ export function ChatRoom({
   actions,
   project_id,
   path,
-  is_visible,
   font_size,
   desc,
 }: EditorComponentProps) {
@@ -368,28 +365,13 @@ export function ChatRoom({
   if (messages == null || input == null) {
     return <Loading theme={"medium"} />;
   }
-  // remove frameContext once the chatroom is part of a frame tree.
-  // we need this now, e.g., since some markdown editing components
-  // for input assume in a frame tree, e.g., to fix
-  //  https://github.com/sagemathinc/cocalc/issues/7554
   return (
-    <FrameContext.Provider
-      value={
-        {
-          project_id,
-          path,
-          isVisible: !!is_visible,
-          redux,
-        } as any
-      }
+    <div
+      onMouseMove={mark_as_read}
+      onClick={mark_as_read}
+      className="smc-vfill"
     >
-      <div
-        onMouseMove={mark_as_read}
-        onClick={mark_as_read}
-        className="smc-vfill"
-      >
-        {render_body()}
-      </div>
-    </FrameContext.Provider>
+      {render_body()}
+    </div>
   );
 }

src/packages/frontend/chat/input.tsx

@@ -205,8 +205,7 @@ export default function ChatInput({
     return intl.formatMessage(
       {
         id: "chat.input.placeholder",
-        defaultMessage:
-          "Type a new message ({have_llm, select, true {chat with AI or } other {}}notify a collaborator by typing @)...",
+        defaultMessage: "Message (@mention)...",
       },
       {
         have_llm,

src/packages/frontend/editors/markdown-input/multimode.tsx

@@ -50,7 +50,6 @@ const multimodeStateCache = new LRU<string, MultimodeState>({ max: 500 });
 const Modes = ["markdown", "editor"] as const;
 export type Mode = (typeof Modes)[number];
 
-
 const LOCAL_STORAGE_KEY = "markdown-editor-mode";
 
 function getLocalStorageMode(): Mode | undefined {
@@ -134,7 +133,7 @@ interface Props {
   // refresh codemirror if this changes
   refresh?: any;
 
-  overflowEllipsis?: boolean; // if true, show "..." button popping up all menu entries
+  overflowEllipsis?: boolean; // if true (the default!), show "..." button popping up all menu entries
 
   dirtyRef?: MutableRefObject<boolean>; // a boolean react ref that gets set to true whenever document changes for any reason (client should explicitly set this back to false).
 
@@ -176,7 +175,7 @@ export default function MultiMarkdownInput({
   onUndo,
   onUploadEnd,
   onUploadStart,
-  overflowEllipsis = false,
+  overflowEllipsis = true,
   placeholder,
   refresh,
   registerEditor,
@@ -287,7 +286,7 @@ export default function MultiMarkdownInput({
     };
   }, [mode]);
 
-  function toggleEditBarPopupver() {
+  function toggleEditBarPopover() {
     setEditBarPopover(!editBarPopover);
   }
 
@@ -390,7 +389,7 @@ export default function MultiMarkdownInput({
               onChange={(e) => {
                 const mode = e.target.value;
                 if (mode === "menu") {
-                  toggleEditBarPopupver();
+                  toggleEditBarPopover();
                 } else {
                   setMode(mode as Mode);
                 }

src/packages/frontend/editors/slate/editable-markdown.tsx

@@ -125,6 +125,7 @@ interface Props {
   controlRef?: MutableRefObject<{
     moveCursorToEndOfLine: () => void;
   } | null>;
+  showEditBar?: boolean;
 }
 
 export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
@@ -164,6 +165,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
     unregisterEditor,
     value,
     controlRef,
+    showEditBar,
   } = props;
   const { project_id, path, desc, isVisible } = useFrameContext();
   const isMountedRef = useIsMountedRef();
@@ -994,16 +996,18 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
         {!hidePath && (
           <Path is_current={is_current} path={path} project_id={project_id} />
         )}
-        <EditBar
-          Search={search.Search}
-          isCurrent={is_current}
-          marks={marks}
-          linkURL={linkURL}
-          listProperties={listProperties}
-          editor={editor}
-          style={editBarStyle}
-          hideSearch={hideSearch}
-        />
+        {showEditBar && (
+          <EditBar
+            Search={search.Search}
+            isCurrent={is_current}
+            marks={marks}
+            linkURL={linkURL}
+            listProperties={listProperties}
+            editor={editor}
+            style={editBarStyle}
+            hideSearch={hideSearch}
+          />
+        )}
         <div
           className={noVfill || height == "auto" ? undefined : "smc-vfill"}
           style={{

src/packages/frontend/frame-editors/whiteboard-editor/elements/text.tsx

@@ -34,15 +34,6 @@ export default function Text(props: Props) {
         editBarStyle: {
           visibility:
             !props.focused || mode == "markdown" ? "hidden" : undefined,
-          top: `${-55 - 5}px`,
-          left: "-24px",
-          position: "absolute",
-          boxShadow: "1px 3px 5px #ccc",
-          margin: "5px",
-          minWidth: "500px",
-          background: "white",
-          fontFamily: "sans-serif",
-          paddingRight: 0, // undoing a temporary hack
         },
         modeSwitchStyle: {
           top: "-82px",
@@ -170,7 +161,7 @@ function EditText({
           2 * PADDING +
           2 +
           15,
-        MIN_HEIGHT
+        MIN_HEIGHT,
       );
       actions.setElement({
         obj: { id: element.id, h: height },
@@ -208,7 +199,7 @@ function EditText({
         // still want to consider it focused, e.g., editing math and code
         // cells, and clicking a checkbox.
       }}
-      value={element.str ? element.str : element.data?.initStr ?? ""}
+      value={element.str ? element.str : (element.data?.initStr ?? "")}
       fontSize={element.data?.fontSize ?? DEFAULT_FONT_SIZE}
       onChange={() => {
         /* MultiMarkdownInput's onChange is debounced by default */

src/packages/frontend/frame-editors/whiteboard-editor/tools/edit-bar.tsx

@@ -220,7 +220,6 @@ function FontSize(props: ButtonProps) {
           width: "64px",
           fontSize: "20px",
           color: "#666",
-          paddingTop: "4px",
         }}
         min={minFontSize}
         max={maxFontSize}
@@ -251,7 +250,6 @@ function Radius(props: ButtonProps) {
           width: "70px",
           fontSize: "20px",
           color: "#666",
-          paddingTop: "4px",
         }}
         min={0}
         max={maxRadius}
@@ -288,7 +286,6 @@ function Opacity(props: ButtonProps) {
           width: "70px",
           fontSize: "20px",
           color: "#666",
-          paddingTop: "4px",
         }}
         min={0}
         max={1}