refactor: update styles on readonly

byoungd · Jun 21, 2023 · 020a812 · 020a812
1 parent e3f7c0b
commit 020a812
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 21 deletions.
diff --git a/.changeset/five-pianos-scream.md b/.changeset/five-pianos-scream.md
@@ -0,0 +1,10 @@
+---
+'@editablejs/plugin-codeblock': major
+'@editablejs/plugin-hr': major
+'@editablejs/plugin-image': major
+'@editablejs/plugin-link': major
+'@editablejs/plugin-list': major
+'@editablejs/plugin-table': major
+---
+
+refactor: update styles on readonly
diff --git a/packages/plugins/codeblock/src/components/popover.tsx b/packages/plugins/codeblock/src/components/popover.tsx
@@ -1,4 +1,9 @@
-import { useIsomorphicLayoutEffect, useLocale, useNodeFocused } from '@editablejs/editor'
+import {
+  useIsomorphicLayoutEffect,
+  useLocale,
+  useNodeFocused,
+  useReadOnly,
+} from '@editablejs/editor'
 import {
   Popover,
   PopoverContent,
@@ -32,7 +37,7 @@ export const CodeBlockPopover: FC<CodeBlockPopoverProps> = ({
   view,
 }) => {
   const focused = useNodeFocused()
-
+  const [readOnly] = useReadOnly()
   const [popoverOpen, setPopoverOpen] = useState(false)
 
   const handlePopoverOpenChange = (open: boolean) => {
@@ -67,7 +72,11 @@ export const CodeBlockPopover: FC<CodeBlockPopoverProps> = ({
   const language = languages.find(({ value }) => value === element.language)
 
   return (
-    <Popover open={popoverOpen} onOpenChange={handlePopoverOpenChange} trigger="hover">
+    <Popover
+      open={readOnly ? false : popoverOpen}
+      onOpenChange={handlePopoverOpenChange}
+      trigger="hover"
+    >
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent autoUpdate={true} side="top" sideOffset={5}>
         <Toolbar mode="inline">

diff --git a/packages/plugins/hr/src/components/hr-popover.tsx b/packages/plugins/hr/src/components/hr-popover.tsx
@@ -1,4 +1,9 @@
-import { useIsomorphicLayoutEffect, useLocale, useNodeFocused } from '@editablejs/editor'
+import {
+  useIsomorphicLayoutEffect,
+  useLocale,
+  useNodeFocused,
+  useReadOnly,
+} from '@editablejs/editor'
 import {
   Icon,
   Popover,
@@ -24,7 +29,7 @@ export interface HrPopoverProps {
 
 export const HrPopover: FC<HrPopoverProps> = ({ editor, element, children }) => {
   const focused = useNodeFocused()
-
+  const [readOnly] = useReadOnly()
   const [popoverOpen, setPopoverOpen] = useState(false)
 
   const handlePopoverOpenChange = (open: boolean) => {
@@ -42,7 +47,11 @@ export const HrPopover: FC<HrPopoverProps> = ({ editor, element, children }) =>
   const { toolbar } = useLocale<HrLocale>('hr')
 
   return (
-    <Popover open={popoverOpen} onOpenChange={handlePopoverOpenChange} trigger="hover">
+    <Popover
+      open={readOnly ? false : popoverOpen}
+      onOpenChange={handlePopoverOpenChange}
+      trigger="hover"
+    >
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent autoUpdate={true} side="top" sideOffset={5}>
         <Toolbar mode="inline">

diff --git a/packages/plugins/hr/src/components/hr.tsx b/packages/plugins/hr/src/components/hr.tsx
@@ -1,4 +1,4 @@
-import { RenderElementProps, useNodeFocused } from '@editablejs/editor'
+import { RenderElementProps, useNodeFocused, useReadOnly } from '@editablejs/editor'
 import { FC } from 'react'
 import tw, { css } from 'twin.macro'
 import { HrEditor } from '../plugin/hr-editor'
@@ -13,12 +13,16 @@ export interface HrProps extends RenderElementProps<Hr> {
 
 export const HrComponent: FC<HrProps> = ({ children, attributes, editor, element }) => {
   const focused = useNodeFocused()
-
+  const [readOnly] = useReadOnly()
   const { color = DEFUALT_HR_COLOR, width = DEFAULT_HR_WIDTH, style = DEFAULT_HR_STYLE } = element
   return (
     <HrPopover editor={editor} element={element}>
       <div
-        css={[tw`py-4 rounded cursor-default hover:bg-gray-100`, focused && tw`bg-gray-100`]}
+        css={[
+          tw`py-4 rounded cursor-default`,
+          !readOnly && tw`hover:bg-gray-100`,
+          focused && !readOnly && tw`bg-gray-100`,
+        ]}
         {...attributes}
       >
         <hr

diff --git a/packages/plugins/image/src/components/image.tsx b/packages/plugins/image/src/components/image.tsx
@@ -1,4 +1,10 @@
-import { Editable, ElementAttributes, useLocale, useNodeFocused } from '@editablejs/editor'
+import {
+  Editable,
+  ElementAttributes,
+  useLocale,
+  useNodeFocused,
+  useReadOnly,
+} from '@editablejs/editor'
 import { Editor, Transforms } from '@editablejs/models'
 import {
   Icon,
@@ -37,7 +43,7 @@ export const ImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
     const [src, setSrc] = useState('')
     const [rotatedUrl, setRotatedUrl] = useState('')
     const [imageDOMElement, setImageDOMElement] = useState<HTMLImageElement | null>(null)
-
+    const [readOnly] = useReadOnly()
     const options = useMemo(() => {
       return getOptions(editor)
     }, [editor])
@@ -73,7 +79,7 @@ export const ImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
             setImageDOMElement(image)
           })
           .catch(err => {
-            if (state === 'done') setErrorMsg(err.message)
+            if (state === 'done') setErrorMsg(typeof err === 'object' ? err.message : err)
           })
       }
     }, [src, state])
@@ -225,7 +231,7 @@ export const ImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
     const autoSize = useMemo(() => {
       if (height === undefined || width === undefined) return undefined
       const ratio = height / width
-      if (width > maxWidth) {
+      if (width > maxWidth && maxWidth > 0) {
         return [maxWidth, maxWidth * ratio]
       }
       return [width, height]
@@ -250,7 +256,7 @@ export const ImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
 
     return (
       <Popover
-        open={isDone ? popoverOpen : false}
+        open={isDone && !readOnly ? popoverOpen : false}
         onOpenChange={handlePopoverOpenChange}
         trigger="hover"
       >
@@ -270,8 +276,8 @@ export const ImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
             <div
               tw="inline-block min-w-[24px] min-h-[24px] h-auto max-w-full"
               style={{
-                width: isError ? undefined : size[0],
-                height: loaded || isError ? undefined : size[1],
+                width: isError ? undefined : size[0] || 'auto',
+                height: loaded || isError ? undefined : size[1] || 'auto',
               }}
             >
               <div tw="inline-block" onMouseDown={handleImageDown} onClick={handleImageClick}>
@@ -282,7 +288,7 @@ export const ImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
                 {renderError()}
                 {renderLoading()}
               </div>
-              {focused && !isError && (
+              {focused && !readOnly && !isError && (
                 <Resizer
                   onChange={handleResizeChange}
                   previewImage={isDone && loaded ? rotatedUrl || src : undefined}

diff --git a/packages/plugins/link/src/components/link.tsx b/packages/plugins/link/src/components/link.tsx
@@ -4,6 +4,7 @@ import {
   useIsomorphicLayoutEffect,
   useLocale,
   useNodeFocused,
+  useReadOnly,
 } from '@editablejs/editor'
 import { Editor, Range, Transforms } from '@editablejs/models'
 import {
@@ -78,8 +79,25 @@ export const LinkComponent = forwardRef<
 
   const locale = useLocale<LinkLocale>('link')
 
+  const [readOnly] = useReadOnly()
+
+  if (readOnly) {
+    return (
+      <a
+        tw="font-medium mb-2 mt-0 text-blue-600 underline"
+        {...props}
+        href={readOnly ? url : undefined}
+        target={readOnly ? '_blank' : undefined}
+        ref={ref}
+        onClick={() => window.open(url, '_blank')}
+        rel="noreferrer"
+      >
+        {children}
+      </a>
+    )
+  }
   return (
-    <Popover open={open} onOpenChange={state => setOpen(focused ? true : state)}>
+    <Popover open={readOnly ? false : open} onOpenChange={state => setOpen(focused ? true : state)}>
       <PopoverTrigger>
         <a tw="font-medium mb-2 mt-0 text-blue-600 underline" {...props} ref={ref}>
           {children}

diff --git a/packages/plugins/list/src/task/plugin/with-task-list.tsx b/packages/plugins/list/src/task/plugin/with-task-list.tsx
@@ -118,6 +118,7 @@ export const withTaskList = <T extends Editable>(editor: T, options: TaskListOpt
         onRenderLabel: element => {
           const { checked } = element as TaskList
           const onChange = (checked: boolean) => {
+            if (Editable.isReadOnly(editor)) return
             Transforms.setNodes<TaskList>(
               editor,
               { checked },

diff --git a/packages/plugins/table/src/components/table.tsx b/packages/plugins/table/src/components/table.tsx
@@ -8,6 +8,7 @@ import {
   useNodeSelected,
   useGridSelection,
   useGridSelected,
+  useReadOnly,
 } from '@editablejs/editor'
 import {
   Grid,
@@ -308,6 +309,8 @@ const TableComponent: React.FC<TableProps> = ({ editor, element, attributes, chi
 
   const composedRefs = useComposedRefs(attributes.ref, tableRef)
 
+  const [readOnly] = useReadOnly()
+
   return (
     <TableContext.Provider value={store}>
       <TableStyles
@@ -319,9 +322,11 @@ const TableComponent: React.FC<TableProps> = ({ editor, element, attributes, chi
         onMouseLeave={handleMouseLeave}
         ref={composedRefs}
       >
-        <TableColHeader editor={editor} table={element} />
-        <TableRowHeader editor={editor} table={element} rowContentHeights={rowContentHeights} />
-        {renderAllHeader()}
+        {!readOnly && <TableColHeader editor={editor} table={element} />}
+        {!readOnly && (
+          <TableRowHeader editor={editor} table={element} rowContentHeights={rowContentHeights} />
+        )}
+        {!readOnly && renderAllHeader()}
         <table style={{ width: !tableWidth ? '' : tableWidth }}>
           {renderColgroup()}
           <tbody>{children}</tbody>