Skip to content

Latest commit

 

History

History
136 lines (86 loc) · 6.33 KB

README.md

File metadata and controls

136 lines (86 loc) · 6.33 KB

Code/text editor metaframe

Metaframe (configurable website) for showing editing code or text. It embeds the monaco code editor (core of VSCode), so you can embed code display or full on editing easily and rapidly within metapages or your own websites, without having to install or configure modules.

The URL contains the entire (editable) text/code:

🔗 https://editor.mtfm.io#?text=**encoded-text**

This makes the URL

  • editable
  • sharable
  • embeddable
  • standalone

Example standalone app with an editor and the markdown renderer

How to create / edit

To modify the options, edit them in the webpage, then copy the URL with the copy button
Untitled.png

Embed in a metapage

graph LR
    classDef mtfm fill:#fff,stroke:#32AEE4,stroke-width:2px;
    classDef mtfmclear fill:#fff,stroke:#fff,stroke-width:2px;
    linkStyle default stroke:#32AEE4,stroke-width:2px,color:black

    mfup["upstream metaframe"]:::mtfm
    subgraph metaframe [" "]
        url["https://editor.mtfm.io#?text=[encoded text]"]:::mtfmclear --> |"#?text=[encoded text]"| M
        M[Render text]:::mtfmclear
    end
    mfup --> |"* any input pipe name is text"| metaframe
    mfdown["downstream metaframe"]:::mtfm
    M --> |text| mfdown
    style metaframe fill:#fff,stroke:#32AEE4,stroke-width:2px;
Loading
  • input pipes:
    • text
      • Raw markdown text
    • *.json
      • Any input field ending in .json will be JSON parsed first

Embed code editor in another application

It requires no installation, and is secure due to cross-origin isolation.

E.g. React

The help menu on this website uses this page in a external iframed element. While this uses @metapages/metapage-embed-react to make some things more convenient, you can also just embed a <iframe src="<url>" /> element directly:

import { useCallback } from 'react';

import { MetaframeStandaloneComponent } from '@metapages/metapage-embed-react';

export const PanelCodeEditor: React.FC<{code:string}> = ({code) => {

 const onOutputs = (text:string) => {
   // do something with the output e.g. saving 
 }
  
  return (
    <div>
      <MetaframeStandaloneComponent
        url="https://editor.mtfm.io/#?button=invisible&md=JTIzJTIwVGhpcyUyMGlzJTIweW91ciUyMG1hcmtkb3duJTBBJTBBVGhlJTIwVVJMJTIwY29udGFpbnMlMjBhbGwlMjB0aGUlMjBjb250ZW50&menuhidden=true&options=JTdCJTIyZGlzcGxheW1vZGUlMjIlM0ElMjJkZWZhdWx0JTIyJTdE"
        inputs={{ text: code}}
				onOutputs={onOutputs}
      />
    </div>
  );
};

Developers: creating your own code editor links

You can generate your own code/text editor/display pages to display in your own webpages easily as embedded iframes.

The text is simply encoded as follows:

export const encodeText = (text: string) => {
  var b64 = window.btoa(encodeURIComponent(text));
  return b64;
};

const yourRawText = "Some code";
const encodedText = encodeText(yourRawText);
const url = `https://editor.mtfm.io/#?button=invisible&text=${encodedText}&menuhidden=true&options=JTdCJTIyZGlzcGxheW1vZGUlMjIlM0ElMjJkZWZhdWx0JTIyJTdE`

Adding options to the code editor link

Currently supported options include:

  • mode - language, defaults to "json"
  • theme: "vs-dark" or "light"
  • autosend: boolean
  • saveloadinhash: boolean
  • readOnly: boolean
  • blockLocalEditorStateOverwrites: boolean (keeps the local state of the editor from being clobbered after instantiation if new content is passed to the input)

Example:

const yourOptions = {blockLocalEditorStateOverwrites: true, readOnly: true};
const encodedOptions = encodeText(JSON.stringify(yourOptions));
const url = `https://editor.mtfm.io/#?options=${yourOptions}`

Just take that url and embed as described above, or via embedded as an iframe:

<iframe src={url} />