文言齋 - Online IDE for wenyan-lang

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.wy-lang.org/embed" height="300" width="500"></iframe>

The basic URL is https://ide.wy-lang.org/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:

iFrame Communication

Get more controls over iframe by

<iframe src="https://ide.wy-lang.org/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`

wenyan-lang/ide