Skip to content
Snippets Groups Projects
Select Git revision
  • f2b999d3df65686da8d7f8bf1796cc692c8f8cb9
  • master default protected
  • develop
  • yjs-question-widgets
  • transform-old-comments
  • test-component-plugin
  • test-application-context
  • fix-layout-view
  • tibetan-prayer-books
  • fix-yjs-positions
  • yjs-commnets-old
  • overlapping-comments
  • track-changes-lists
  • yjs
  • tables-overlay
  • massifr
  • testing
  • v0.9.98
  • v0.9.97
  • v0.9.96
  • v0.9.95
  • v0.9.94
  • v0.9.93
  • v0.9.92
  • v0.9.91
  • v0.9.90
  • v0.9.89
  • v0.9.88
  • v0.9.87
  • v0.9.86
  • v0.9.85
  • v0.9.84
  • v0.9.83
  • v0.9.82
  • v0.9.81
  • v0.9.80
  • v0.9.79
37 results

Editoria.js

Blame
  • user avatar
    chris authored
    f2b999d3
    History
    Editoria.js 2.24 KiB
    import React, { useLayoutEffect, useState, useMemo, useRef } from 'react';
    
    import { Wax } from 'wax-prosemirror-core';
    
    import { EditoriaLayout, EditoriaMobileLayout } from './layout';
    import { config, configMobile } from './config';
    import { demo } from './demo';
    import { debounce } from 'lodash';
    
    const renderImage = file => {
      const reader = new FileReader();
      return new Promise((accept, fail) => {
        reader.onload = () => accept(reader.result);
        reader.onerror = () => fail(reader.error);
        // Some extra delay to make the asynchronicity visible
        setTimeout(() => reader.readAsDataURL(file), 150);
      });
    };
    
    const user = {
      userId: 'b3cfc28e-0f2e-45b5-b505-e66783d4f946',
      userColor: {
        addition: 'royalblue',
        deletion: 'indianred',
      },
      username: 'admin',
    };
    
    // const users = [{
    //   userId: 'b3cfc28e-0f2e-45b5-b505-e66783d4f946',
    //   username: 'admin',
    // }];
    
    const Editoria = () => {
      const [width] = useWindowSize();
    
      let layout = EditoriaLayout;
      let finalConfig = config;
      let key = 'editoria';
    
      if (width < 600) {
        layout = EditoriaMobileLayout;
        finalConfig = configMobile;
        key = 'editoriaMobile';
      }
      const editorRef = useRef();
    
      const EditoriaComponent = useMemo(
        () => (
          <>
            <Wax
              ref={editorRef}
              key={key}
              config={finalConfig}
              autoFocus
              placeholder="Type Something..."
              fileUpload={file => renderImage(file)}
              value={demo}
              // readonly
              layout={layout}
              // onChange={debounce(source => {
              //   console.log(JSON.stringify(source));
              // }, 200)}
              user={user}
              scrollMargin={200}
              scrollThreshold={200}
            />
          </>
        ),
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [layout, finalConfig],
      );
      return <>{EditoriaComponent}</>;
    };
    
    function useWindowSize() {
      const [size, setSize] = useState([window.innerWidth, window.innerHeight]);
      useLayoutEffect(() => {
        function updateSize() {
          setSize([window.innerWidth, window.innerHeight]);
        }
        window.addEventListener('resize', updateSize);
        updateSize();
    
        return () => window.removeEventListener('resize', updateSize);
      }, []);
      return size;
    }
    
    export default Editoria;