ONES Wiki

Suitable Enviroment	SaaS
	Private Deployment

Requirements

ONES
v3.14.0+

Overview

We have provided slots for "Wiki" - "Space" - "Wiki page" to customize the page module for the application.

The slots currently supported are as follows:

• ones:wiki:space:header:title
• ones:wiki:page:header:action:new
• ones:wiki:space:nav:new (v6.15.0+)

Slots

ones:wiki:space:header:title

** Module path：** ONES Wiki / spaces / Wiki page / title

** Number limit：** Declare a maximum of 1 slots in each plugin，and up to 1 slots in the system.

ones:wiki:page:header:action:new

** ONES Requirement: ** v3.14.0+

** Module path ** ONES Wiki / spaces / Wiki page / top header action / title

** Number limit：** Declare a maximum of 10 slots in each plugin，and up to 10 slots in the system.

Usage

- id: ones-wiki-space-header-title-oU6k
  title: wiki
  moduleType: ones:wiki:space:header:title
  entry: modules/ones-wiki-space-header-title-oU6k/index.html

Available Hook API

• useWikiSpaceInfo

import { useWikiSpaceInfo } from '@ones-op/store'

const spaceInfo = useWikiSpaceInfo()

• useWikiPageInfo

import { useWikiPageInfo } from '@ones-op/store'

const pageInfo = useWikiPageInfo()

New Features in v6.12.0+

**ONES Requirement: ** v6.12.0+

Modules can be added to the wiki editing page, supporting wiki collaborative editing pages, WPS editing pages, and old wiki editing pages.

- id: ones-wiki-space-header-title-oU6k
  title: wiki
  moduleType: ones:wiki:page:header:action:new
  actionType:
    - edit
    - view
  pageType:
    - wps
    - wiki
    - wiz

• If no actionType is specified, only reading pages are supported by default.
• If no pageType is specified, all page types are supported by default. The pageType is only used for wiki editing pages, and it will be ignored for reading pages.
• If you add it to the dropdown menu of the "More" button, both preload and manual need to be set to true. When clicking on a menu item, only that module's code will be executed. After the user is finished, the plugin code needs to call lifecycle.onDestroy() to unload the module. Otherwise, if the user clicks on the menu item again, the plugin system will report an error.

Obtaining the WPS WebOffice SDK (can support WPS reading and editing pages)

import React from 'react'
import ReactDOM from 'react-dom'
import { Button, ConfigProvider } from '@ones-design/core'
import { lifecycle, OPProvider } from '@ones-op/bridge'
import { useStoreInfo } from '@ones-op/store'

import './index.css'


function ActionButton() {

  const store: any = useStoreInfo().store;
  console.log('store info:', store);

  async function clickHandler() {
    const instance = store?.wpsPageInfo?.instance;
    if (!instance) {
      return;
    }
    //
    const app = instance.Application

    const Range = await app.ActiveDocument.Content
    const text = await Range.Text
    alert(text)
  }

  return (
    <Button onClick={clickHandler} size='small' style={{
      marginRight: '20px',
    }}>
      View & Edit Action (WPS only)
    </Button>
  );
}

ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <ActionButton />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)

lifecycle.onDestroy(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('ones-mf-root'))
})

Obtaining the collaborative editor object (can support collaborative reading and editing pages)

import React from 'react'
import ReactDOM from 'react-dom'
import { Button, ConfigProvider } from '@ones-design/core'
import { lifecycle, OPProvider } from '@ones-op/bridge'
import { useStoreInfo } from '@ones-op/store'

import './index.css'

function textBlockToText(editor: any, ops: any, doc: any): string {
  let text = '';
  ops.forEach((op) => {
    if (op.attributes && op.attributes.box === true) {
      //
      const box = op.attributes;
      const boxClass = editor.editorBoxes.getBoxClass(box.type);
      if (boxClass?.convertTo) {
        text += boxClass.convertTo(editor, box, doc, 'text');
        return;
      }
      //
      if (op.attributes.text) {
        text += op.attributes.text;
        return;
      }
      //
      text += `[${box.type}]`;
    }
    text += op.insert;
  });
  return text;
}

function blockToText(editor: any, blockData: any, doc: any, path: any) {
  const blockClass = editor.editorBlocks.getBlockClass(blockData.type);
  if (blockClass.convertTo) {
    return blockClass.convertTo(editor, blockData, doc, 'text', path);
  }
  //
  if (blockClass.blockKind !== 'text') {
    return `[${blockData.type}]`;
  }
  //
  const plainText = textBlockToText(editor, blockData.text, doc);
  return plainText;
}

function docToText(editor: any, doc: any): string {
  const lines = doc.blocks.root.map((b, blockIndex) => blockToText(editor, b, doc, [{ containerId: 'root', blockIndex }]));
  const html = lines.join('\n');
  return html;
}


function ActionButton() {
  const store: any = useStoreInfo().store;

  function clickHandler() {
    const editor = store?.wizPageEditor?.editor;
    if (editor) {
      const text = docToText(editor, editor.doc.toJSON());
      alert(text);
    }
  }

  return (
    <Button onClick={clickHandler} size='small' style={{
      marginRight: '20px',
    }}>
      Edit Action Only
    </Button>
  );
}

ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <ActionButton />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)

lifecycle.onDestroy(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('ones-mf-root'))
})

More button dropdown menu

import React from 'react'
import ReactDOM from 'react-dom'
import { ConfigProvider } from '@ones-design/core'
import { lifecycle, OPProvider } from '@ones-op/bridge'
import { useStoreInfo } from '@ones-op/store'

import './index.css'
import { docToText } from '../../utils/doc-to-text'


function RunAction() {
  const store: any = useStoreInfo().store;
  console.log('store info:', store);

  React.useEffect(() => {

    async function clickHandler() {
      const instance = store?.wpsPageInfo?.instance;
      if (instance) {
        const app = instance.Application
        if (app.ActiveDocument) {
          // wps document
          const Range = await app.ActiveDocument.Content
          const text = await Range.Text
          alert(text)
        }
        if (app.ActiveSheet) {
          // wps spreadsheet
          const activeSheet = await app.ActiveSheet
          //
          const name = await activeSheet.Name
          alert(name)
        }
        return;
      }
      //
      const editor = store?.wizPageEditor?.editor;
      if (editor) {
        // collaborative editing page
        const text = docToText(editor, editor.doc.toJSON());
        alert(text);
      }
      lifecycle.destroy();
    }
    //
    clickHandler();
  }, [store]);

  return (
    <div />
  );
}

ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <RunAction />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)

lifecycle.onDestroy(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('ones-mf-root'))
})

ones:wiki:space:nav:new

Space Navigation Items Extension Slot

- id: ones-wiki-space-nav-new-w0Wg
  title: test nav plugin
  moduleType: ones:wiki:space:nav:new
  enableMemoryRouter: true
  entry: modules/ones-wiki-space-nav-new-w0Wg/index.html
  icon: logo.svg

You can obtain the current space information through useWikiSpaceInfo.

import React from 'react'
import ReactDOM from 'react-dom'
import { ConfigProvider } from '@ones-design/core'
import { lifecycle, OPProvider } from '@ones-op/bridge'
import { useWikiSpaceInfo } from '@ones-op/store';
import './index.css'

function Content() {
  const spaceInfo = useWikiSpaceInfo();
  return (
    <div>
      test nav plugin ({spaceInfo?.name})
    </div>
  )
}

ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <Content />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)