Non-Editable Mode Playground Improvements (#2927)

* Remove read only mode API, make dit mode * Fix docs * only show comments in toolbar in non-editable mode Co-authored-by: Dominic Gannaway <[email protected]>
facebook · Nov 25, 2022 · 6bdceef · 6bdceef
1 parent 011a916
commit 6bdceef
Showing 1 changed file with 70 additions and 66 deletions.
diff --git a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -137,74 +137,78 @@ function TextFormatFloatingToolbar({
 
   return (
     <div ref={popupCharStylesEditorRef} className="floating-text-format-popup">
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
-        }}
-        className={'popup-item spaced ' + (isBold ? 'active' : '')}
-        aria-label="Format text as bold">
-        <i className="format bold" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
-        }}
-        className={'popup-item spaced ' + (isItalic ? 'active' : '')}
-        aria-label="Format text as italics">
-        <i className="format italic" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
-        }}
-        className={'popup-item spaced ' + (isUnderline ? 'active' : '')}
-        aria-label="Format text to underlined">
-        <i className="format underline" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
-        }}
-        className={'popup-item spaced ' + (isStrikethrough ? 'active' : '')}
-        aria-label="Format text with a strikethrough">
-        <i className="format strikethrough" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
-        }}
-        className={'popup-item spaced ' + (isSubscript ? 'active' : '')}
-        title="Subscript"
-        aria-label="Format Subscript">
-        <i className="format subscript" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
-        }}
-        className={'popup-item spaced ' + (isSuperscript ? 'active' : '')}
-        title="Superscript"
-        aria-label="Format Superscript">
-        <i className="format superscript" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
-        }}
-        className={'popup-item spaced ' + (isCode ? 'active' : '')}
-        aria-label="Insert code block">
-        <i className="format code" />
-      </button>
-      <button
-        onClick={insertLink}
-        className={'popup-item spaced ' + (isLink ? 'active' : '')}
-        aria-label="Insert link">
-        <i className="format link" />
-      </button>
+      {editor.isEditable() && (
+        <>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+            }}
+            className={'popup-item spaced ' + (isBold ? 'active' : '')}
+            aria-label="Format text as bold">
+            <i className="format bold" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+            }}
+            className={'popup-item spaced ' + (isItalic ? 'active' : '')}
+            aria-label="Format text as italics">
+            <i className="format italic" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+            }}
+            className={'popup-item spaced ' + (isUnderline ? 'active' : '')}
+            aria-label="Format text to underlined">
+            <i className="format underline" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+            }}
+            className={'popup-item spaced ' + (isStrikethrough ? 'active' : '')}
+            aria-label="Format text with a strikethrough">
+            <i className="format strikethrough" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+            }}
+            className={'popup-item spaced ' + (isSubscript ? 'active' : '')}
+            title="Subscript"
+            aria-label="Format Subscript">
+            <i className="format subscript" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
+            }}
+            className={'popup-item spaced ' + (isSuperscript ? 'active' : '')}
+            title="Superscript"
+            aria-label="Format Superscript">
+            <i className="format superscript" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+            }}
+            className={'popup-item spaced ' + (isCode ? 'active' : '')}
+            aria-label="Insert code block">
+            <i className="format code" />
+          </button>
+          <button
+            onClick={insertLink}
+            className={'popup-item spaced ' + (isLink ? 'active' : '')}
+            aria-label="Insert link">
+            <i className="format link" />
+          </button>
+        </>
+      )}
       <button
         onClick={insertComment}
-        className={'popup-item spaced ' + (isLink ? 'active' : '')}
-        aria-label="Insert link">
+        className={'popup-item spaced'}
+        aria-label="Insert comment">
         <i className="format add-comment" />
       </button>
     </div>