Skip to main content

Adding Custom Actions for Selected Text on Wiki Pages

Suitable EnviromentSaaS
Private Deployment

Requirements​

ONES@ones-op/bridge@ones-op/editor
v6.2.16+v0.46.0+v0.46.0+

Overview​

After adding this capability, you can add custom buttons and corresponding actions to the floating toolbar that appears when selecting text on the collaboration page in the wiki.

Usage​

You must add the following to plugin.yaml:

  • scene: selectionAction
  • preload: true
  • manual: true

Complete example:

modules:
  - id: ones-wiki-editor-new-VIAh
    title: example page type
    moduleType: ones:wiki:editor:new
    icon: logo.svg
    modules:
      - id: ones-wiki-editor-new-v2bt
        title: test action # button title
        enableMemoryRouter: true
        entry: modules/ones-wiki-editor-new-VIAh/ones-wiki-editor-new-v2bt/index.html
        scene: selectionAction # must be added
        preload: true # must be added
        manual: true # must be added
        iconText: >- # button icon svg string
          <?xml version="1.0" encoding="iso-8859-1"?> <svg width="16px"
          height="16px" version="1.1" id="Layer_1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 100.354 100.352" style="enable-background:new 0 0 100.354 100.352;" xml:space="preserve">
          <path
          d="M96.364,39.436c-0.525-1.615-1.895-2.77-3.574-3.013l-26.672-3.876L54.19,8.378c-0.751-1.522-2.272-2.468-3.97-2.468l0,0
            c-1.697,0-3.219,0.946-3.971,2.468L34.321,32.547L7.649,36.423c-1.681,0.244-3.05,1.398-3.575,3.013s-0.095,3.354,1.121,4.54
            l19.3,18.813L19.92,89.466c-0.285,1.659,0.38,3.311,1.734,4.311c0.78,0.576,1.7,0.87,2.626,0.87c0.682,0,1.367-0.159,2.003-0.481
            l24.49-12.395l23.302,12.25c1.503,0.791,3.29,0.662,4.663-0.337c1.374-0.998,2.049-2.658,1.762-4.331l-4.557-26.564l19.3-18.812
            C96.459,42.791,96.889,41.051,96.364,39.436z M93.15,41.828L72.72,61.742l4.823,28.118c0.094,0.548-0.119,1.07-0.568,1.397
            c-0.449,0.328-1.011,0.369-1.503,0.109L50.8,78.395L24.929,91.489c-0.494,0.249-1.05,0.201-1.493-0.125
            c-0.443-0.327-0.652-0.847-0.559-1.39l4.842-28.231L7.289,41.829c-0.398-0.388-0.533-0.935-0.361-1.464
            c0.172-0.528,0.603-0.892,1.153-0.972l28.233-4.103L48.94,9.707c0.246-0.499,0.725-0.796,1.28-0.796l0,0
            c0.556,0,1.034,0.297,1.28,0.796L64.126,35.29l28.233,4.103c0.55,0.08,0.98,0.443,1.152,0.972S93.548,41.44,93.15,41.828z"/>
          </svg>

The following button will appear:

Button click response functionality:

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

function TestAction() {
  const storeInfo = useStoreInfo()
  console.log('store', storeInfo)
  const store = storeInfo.store
  const { variablesInfo, wikiPageInfo, wikiTemplatePageInfo, wikiShareInfo } = store as any
  const { editor, tools } = variablesInfo
  console.log(editor, tools, wikiPageInfo, wikiShareInfo, wikiTemplatePageInfo)
  const onesEditor = tools.getRawEditor() as OnesEditor
  const text = onesEditor.getSelectedText()
  const html = onesEditor.selection.to('html')

  return (
    <div style={{
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      zIndex: '9999',
      background: 'white',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <p>
        <pre>{JSON.stringify(wikiPageInfo, null, 2)}</pre>
      </p>
      <p>
        <pre>{text}</pre>
      </p>
      <p dangerouslySetInnerHTML={{ __html: html }}></p>
      <Button onClick={() => lifecycle.destroy()}>Close</Button>
    </div>
  )
}

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

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

Detailed Steps​

Create a Project​

ones create -d

Add a Wiki Editor Module​

npx op add module

At this step, select ones:wiki:editor:new for the module type.

Add a Submodule​

npx op add sub-module

Select the previously added module id and add a submodule.

Modify Submodule Configuration​

Edit config/plugin.yaml and under the corresponding submodule, add:

scene: selectionAction
preload: true
manual: true

The submodule title will be displayed as the button text. If you want to display an icon, add the iconText field with the SVG string as its value.

Write Response Code for Button Click​

Following the example above, write response code to fetch the selected text and its HTML. Ensure that after the button is clicked and the corresponding action is completed, you call lifecycle.destroy() to close the plugin. Failing to do this may cause exceptions on subsequent button clicks.24

Last updated on