feat: added disabled functionality

Author: Arif-un

src/MixInput.css

@@ -1,12 +1,17 @@
 .mix-input{
  padding: .375rem;
  border: 1px solid #ccc;
- border-radius: .25rem;
  min-height: 27px;
+ border-radius: .25rem;
  display: block;
  font-size: 1rem;
 }
 
+.mi-disabled{
+ background-color: #f3f3f3;
+ color: #666;
+}
+
 .mix-input:focus{
  border: 1px solid #000;
 }

src/MixInput.tsx

@@ -22,9 +22,8 @@ const MixInput = forwardRef((props: MixInputProps, ref?: ForwardedRef<MixInputRe
  const {
  onChange,
  value = [],
- // multiline,
  placeholder,
- readonly = false,
+ disabled = false,
  tagClassName = 'mi-tag',
  editorOptions,
  className,
@@ -38,9 +37,10 @@ const MixInput = forwardRef((props: MixInputProps, ref?: ForwardedRef<MixInputRe
  const previousValueRef = useRef<string>('')
 
  const editor = useEditor({
+ editable: !disabled,
  immediatelyRender,
  editorProps: {
- attributes: { class: `mix-input ${className || ''}` },
+ attributes: { class: `mix-input ${disabled ? 'mi-disabled' : ''} ${className || ''}` },
  },
  extensions: [
  Document,
@@ -56,12 +56,14 @@ const MixInput = forwardRef((props: MixInputProps, ref?: ForwardedRef<MixInputRe
  }),
  ],
  onUpdate: ({ editor }) => {
+ if (disabled) return
  onChange?.(editorValueToMixInputValue(editor?.getJSON()?.content || []))
  },
  ...editorOptions,
  })
 
  const insertContent = (content: MixInputValue | MixInputValue[] | MixInputValue[][]) => {
+ if (disabled) return
  editor?.chain().focus().insertContent(content).run()
  }
 
@@ -97,6 +99,7 @@ const MixInput = forwardRef((props: MixInputProps, ref?: ForwardedRef<MixInputRe
 
  return (
  <EditorContent
+ aria-disabled={disabled}
  editor={editor}
  innerRef={editorRef}
  {...(restProps as Omit<typeof restProps, 'ref'>)}

src/MixInputType.d.ts

@@ -22,14 +22,13 @@ export interface MixInputProps extends HTMLAttributes<HTMLDivElement>, Omit<Edit
  value?: MixInputValues
  placeholder?: string
  onChange?: (value: MixInputValues) => void
- readonly?: boolean
+ disabled?: boolean
  tagClassName?: string
  editorOptions?: UseEditorOptions
  tagAttrs?: Record<string, string | undefined>
  tagView?: (props: NodeViewProps) => React.ReactNode
  immediatelyRender?: boolean
  ref?: React.Ref<MixInputRef>
- // multiline?: boolean
 }
 
 export interface MixInputRef {