kugeceo/ide.luhui.net

文言齋 Online IDE for wenyan-lang

鲁虺文言斋#

原文言齋 - Online IDE for wenyan-lang

http://ide.luhui.net/

https://wenyanwen.netlify.app/

https://ide.wy-lang.org/

Import external scripts

Import scripts to IDE by query string

https://ide.wy-lang.org?import&title=問天地好在&code=吾有一言。曰「「問天地好在。」」。書之。

Embed IDE

You can embed the Online IDE into your own website by using iframe.

Check out the live demo for more details.

<iframe src="https://ide.luhui.net/embed" height="300" width="500"></iframe>

The basic URL is https://ide.luhui.net/embed

Query Options

Config the IDE by using query strings.

Field	Description	Default
title	The title of the file	""
code	The wenyan script in the editor	""
autorun	Execute the script on loaded	false
show-compile	Show the Compiled panel	false
show-configs	Show the configs buttons	false
show-bars	Show action bars in editor	false
hide-output	Hide output panel	false
readonly	Make file readonly	false
output-hanzi	Output numbers as hanzi	false

Here are some example usages:

• /embed?autorun&title=問天地好在&code=吾有一言。曰「「問天地好在。」」。書之。
• /embed?dark&show-compile&autorun&title=問天地好在&code=吾有一數。曰三。名之曰「甲」。%0A為是「甲」遍。%0A%09吾有一言。曰「「問天地好在。」」。書之。%0A云云。

iFrame Communication

Get more controls over iframe by

<iframe src="https://ide.luhui.net/embed" id="editor"></iframe>

Sending

const editor = document.getElementById('editor')

// Change title
editor.contentWindow.postMessage({ action: 'title', value: 'New Title' }, '*')

// Update code
editor.contentWindow.postMessage({ action: 'code', value: '吾有一言。曰「「問天地好在。」」。書之。' }, '*')

// change to dark mode, (by specify `field` option, you can change other options as well)
editor.contentWindow.postMessage({ action: 'config', field: 'dark', value: true }, '*')

// re-run code
editor.contentWindow.postMessage({ action: 'run' }, '*')

// clear output
editor.contentWindow.postMessage({ action: 'clear' }, '*')

// change theme
editor.contentWindow.postMessage({ action: 'theme', value: 'Wenyan Dark' }, '*')
// or
editor.contentWindow.postMessage({ action: 'theme', value: { background: '#222' } }, '*')

Receiving

window.addEventListener('message', (e) => {
  // filtering, message from the ide always contains `source` filed.
  if (e.data.source === 'wenyan-ide') {
    if (e.data.action === 'change') {
      console.log('Code changed to ' + e.data.value)
    }
  }
})

Custom Buttons

Adding custom icon buttons to the UI is also possible

// config
editor.contentWindow.postMessage({ 
  action: 'custom', 
  value: {
    id: 'my-custom-button',
    icon: 'cog', // icon name follows https://iconify.design/
  },
}, '*')

// receive
window.addEventListener('message', (e) => {
  if (e.data.source === 'wenyan-ide') {
    if (e.data.action === 'custom' && e.data.id === 'my-custom-button') {
      console.log('My custom button got clicked!')
    }
  }
})

Custom UI Options

Field	Description	Default
id	The id of the button	Required
icon	The icon name follows the iconify naming system	One of icon and text required
bars	Can be editor or output	editor
align	Place at left or right	left
tooltip	Tooltip to show on button hovered	undefined
type	Only support button for now	button