wax
wax-prosemirror

Repository

autoFocus; // sets cursor in the begging of the document
onChange; // when the editor's surface is updated (perform an action ex. save)
value; // the actual HTML content of the editor
fileUpload; // used for uploading images (should return a promise with the actual file path)
placeholder; // a placeholder used for empty documents
config; // Editor's configuration. Menus, packages, PM plugins etc Check [editoria config](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/editors/editoria/src/config/config.js)
readonly; // editor in in read-only mode
onBlur; // on focus lost
layout; // used to create your own Layout using React components
debug; // dev-tools (https://github.com/d4rkr00t/prosemirror-dev-tools)
import { toggleMark } from 'prosemirror-commands';
import Service from 'wax-prosemirror-core/src/services/Service';
import { strongMark } from 'wax-prosemirror-schema';
import Strong from './Strong';

class StrongService extends Service {
  boot() {
    const shortCuts = this.container.get('ShortCuts');
    shortCuts.addShortCut({ 'Mod-b': toggleMark(this.schema.marks.strong) });
  }

  register() {
    this.container.bind('Strong').to(Strong);
    const createMark = this.container.get('CreateMark');
    createMark(
      {
        strong: strongMark,
      },
      { toWaxSchema: true },
    );
  }
}

export default StrongService;
register() {
    const PmPlugins = this.app.PmPlugins;
    this.container
      .bind("ShortCuts")
      .toDynamicValue(() => {
        const { schema: { schema } } = this.app;

        return new ShortCuts(PmPlugins, schema);
      })
      .inSingletonScope();
  }
boot() {
    const { menus } = this.container.get("MenuCollection");
    const layout = this.container.get("Layout");
    menus.forEach(menu => {
      layout.addComponent(menu.config.templateArea, menu.render());
    });
  }
class InlineAnnotationsService extends Service {
  dependencies = [
    new CodeService(),
    new StrongService(),
    new EmphasisService(),
    new SubscriptService(),
    new SuperscriptService(),
    new StrikeThroughService(),
    new UnderlineService(),
    new SmallCapsService(),
  ];
}
CreateNode(
  {
    paragraph: {
      group: 'block',
      content: 'inline*',
      attrs: {
        class: { default: 'paragraph' },
      },
      parseDOM: {
        tag: 'p.paragraph',
        getAttrs(hook, next) {
          Object.assign(hook, {
            class: hook.dom.getAttribute('class'),
          });
          next();
        },
      },
      toDOM(hook, next) {
        const attrs = { class: hook.node.attrs.class };

        hook.value = ['p', attrs, 0];
        next();
      },
    },
  },
  { toWaxSchema: true },
);
CreateNode(
  {
    paragraph: {
      group: 'block',
      content: 'inline*',
      attrs: {
        user: { default: [] },
      },
      parseDOM: {
        tag: 'p.paragraph',
        getAttrs(hook, next) {
          Object.assign(hook, {
            user: parseUser(hook.dom.dataset.user),
          });
          next();
        },
      },
      toDOM(hook, next) {
        Object.assign(hook.value[1], {
          'data-user': JSON.stringify(hook.node.attrs.user),
        });
        next();
      },
    },
  },
  { toWaxSchema: true },
);
import { ComponentPlugin } from 'wax-prosemirror-core';

const LeftSideBar = componentPlugin('leftSideBar');
const RightSideBar = componentPlugin('rightSideBar');
const TopBar = componentPlugin('topBar');
const BottomBar = componentPlugin('bottomBar');
const WaxOverlays = componentPlugin('waxOverlays');

const EditoriaLayout = ({ editor }) => {
  return (
    <ThemeProvider theme={cokoTheme}>
      <LayoutWrapper>
        <MainMenuContainer>
          <MainMenuInner>
            <TopBar />
          </MainMenuInner>
        </MainMenuContainer>
        <WaxSurfaceContainer>
          <SideMenuContainer>
            <SideMenuInner>
              <LeftSideBar />
            </SideMenuInner>
          </SideMenuContainer>
          <WaxSurfaceScroll className="wax-surface-scroll">
            {editor}
            <WaxOverlays />
          </WaxSurfaceScroll>
          <RightSideBar />
        </WaxSurfaceContainer>
        <BottomBar />
        <InfoArea />
      </LayoutWrapper>
    </ThemeProvider>
  );
};
MenuService: [
    {
      templateArea: "topBar",
      toolGroups: ["Base", "Annotations", "Lists", "Images", "Tables"]
    },
    {
      templateArea: "leftSideBar",
      toolGroups: ["Display"]
    }
  ],