Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bgrand-ch/grapesjs-float below:

bgrand-ch/grapesjs-float: GrapesJS float plugin with Floating UI

grapesjs-float plugin is not an official Floating UI plugin and is not maintained by the Floating UI team. If you use grapesjs-float plugin, please donate to Floating UI.

npm install grapesjs grapesjs-float @floating-ui/dom

import grapesjs from 'grapesjs'
import grapesjsFloat from 'grapesjs-float'

const pluginOptions = {
  floatingElement: HTMLElement // optional, if specified in "float:show-element" command options
}
const editor = grapesjs.init({
  // ...
  plugins: [
    grapesjsFloat
  ],
  pluginOpts: {
    [grapesjsFloat]: pluginOptions
  }
  // ...
})

import grapesjs, { usePlugin } from 'grapesjs'
import grapesjsFloat from 'grapesjs-float'

import type { PluginOptions, CommandOptions } from 'grapesjs-float'

const pluginOptions: PluginOptions = {
  floatingElement: HTMLElement // optional, if specified in "float:show-element" command options
}
const editor = grapesjs.init({
  // ...
  plugins: [
    usePlugin(grapesjsFloat, pluginOptions)
  ]
  // ...
})

// Your reference HTML element.
const selectedEl = editor.getSelected()?.getEl()

// Your floating HTML element.
const floatingEl = document.getElementById('floating-element')

Full demonstration in the src/example.ts file.

const commandOptions: CommandOptions = {
  referenceElement: selectedEl, // optional, selected component by default
  floatingElement: floatingEl // optional, if specified in the plugin options
}

editor.runCommand('float:show-element', commandOptions)

const commandOptions: CommandOptions = {
  referenceElement: selectedEl, // optional, selected component by default
  floatingElement: floatingEl // optional, your floating html element by default
}

editor.runCommand('float:hide-element', commandOptions)

editor.on('float:show-element', (floatingElement, referenceElement) => {
  console.log('Floating element is shown', {
    floatingElement,
    referenceElement
  })
})

editor.on('float:hide-element', (floatingElement, referenceElement) => {
  console.log('Floating element is hidden', {
    floatingElement,
    referenceElement
  })
})

{
  floatingElement: HTMLElement // optional, if specified in "float:show-element" command options
}

If you have a question about how grapesjs-float works or an idea to improve it, the Discussions tab in GitHub is the place to be.

However, if you get an error, you should open an issue.

Distributed under the BSD 3-Clause License. See LICENSE for more information.

Benjamin Grand @bgrand_ch

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4