@mercuriya/slate-gallery-read-only v0.8.0-alpha.4

Slate gallery (read-only)

An image gallery for slate editor

Installation

yarn add @mercuriya/slate-gallery-read-only

npm install @mercuriya/slate-gallery-read-only --save

Configuration

In your file with Slate component:

import React from 'react';
import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';
import { withGallery, } from '@mercuriya/slate-gallery';

const initialValue = Value.fromJSON({ ... });
const plugins = [galleryPlugin({ ...options })];

export default function EditorComponent(props) {
  const [value, setValue] = useState([ /* some initial state here */ ]);
  const editor = useMemo(
    () =>
      withGallery(withReact(createEditor()), {
        // slate-gallery options        
      }),
    [],
  );   
  const renderElement = useCallback(({ attributes, children, element }) => {
    switch (element.type) {
      case 'gallery':
        return editor.galleryElementType({
          attributes,
          children,
          element,
          // ❗️ we use this prop internally, so you must provide it here
          readOnly: false, // or true
        });
      default:
        return <p {...attributes}>{children}</p>;
    }
  }, []);

  return (
    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
      <Editable renderElement={renderElement} />
    </Slate>
  );
}

Description

This plugin adds a void block which can show images as an image grid. It allows to cover each image in something like image lightbox if you want.

Each image can have a description, which is not related with image tag alt props. It is stored as data of this gallery block.

readOnly: false mode:

readOnly: true mode:

Please, see stories for more usage examples.

Options