-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #386 from TypeCellOS/staging
deploy
- Loading branch information
Showing
74 changed files
with
13,989 additions
and
5,338 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| # Plugins | ||
|
|
||
| A powerful concept that TypeCell explores is _End User Programming_. In TypeCell, it's possible to customize the program you're using (a Notion-style document editor) with new capabilities, _right from within the application itself_. This means you can modify the way TypeCell works, without changing the source code, but just by creating new code in TypeCell code blocks. | ||
|
|
||
| ## Map block | ||
|
|
||
| When using software like Notion, Google Docs, or Word, you're limited to the blocks they provide (paragraphs, images, lists, tables, etc.). What if you want to add an interactive map, or chart to your document? Let's explore how this can be done in TypeCell. | ||
|
|
||
| Let's first set up the code to render a Map, based on _react-map-gl_. | ||
|
|
||
| ### Map code | ||
|
|
||
| First, let's set up some reactive variables for our map component: | ||
|
|
||
| ```typescript | ||
| export let zoom = 1; | ||
| export let latitude = 1; | ||
| export let longitude = 1; | ||
| export let markers: Array<{ | ||
| latitude: number; | ||
| longitude: number; | ||
| color: string; | ||
| text: string; | ||
| }> = []; | ||
| ``` | ||
|
|
||
| And import the required CSS stylesheet: | ||
|
|
||
| ```typescript | ||
| import css from "maplibre-gl/dist/maplibre-gl.css"; | ||
| export { css }; | ||
| ``` | ||
|
|
||
| Now, let's create the main code that renders our map component: | ||
|
|
||
| ```typescript | ||
| import MapLibre, { Marker, Source, Layer, Popup } from "react-map-gl/maplibre"; | ||
| import maplibregl from "maplibre-gl"; | ||
|
|
||
| export const map = ( | ||
| <div style={{ width: 700, height: 400 }}> | ||
| <MapLibre | ||
| onMove={(e) => { | ||
| $.zoom = e.viewState.zoom; | ||
| $.latitude = e.viewState.latitude; | ||
| $.longitude = e.viewState.longitude; | ||
| }} | ||
| longitude={$.longitude} | ||
| latitude={$.latitude} | ||
| zoom={$.zoom} | ||
| mapStyle="https://demotiles.maplibre.org/style.json"> | ||
| {$.markers.map((m, i) => ( | ||
| <Marker | ||
| key={i} | ||
| latitude={m.latitude} | ||
| longitude={m.longitude} | ||
| color={m.color} | ||
| popup={m.text ? new maplibregl.Popup().setText(m.text) : undefined} | ||
| /> | ||
| ))} | ||
| </MapLibre> | ||
| </div> | ||
| ); | ||
| ``` | ||
|
|
||
| ### Register a plugin | ||
|
|
||
| Now, we can register the _Map_ variable as a Block that can be added to any document. Try it out by typing "/" in this document, or clicking the + icon next to a block. You'll see that you can now add Map blocks to the document. | ||
|
|
||
| ```typescript | ||
| // Plugin registration | ||
| typecell.editor.registerBlock({ | ||
| name: "Map", | ||
| blockVariable: "map", | ||
| // Variables for properties screen that's auto-generated | ||
| // and shows when clicking the settings-gear icon | ||
| settings: { | ||
| latitude: true, | ||
| longitude: true, | ||
| zoom: true, | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| Your local environment will keep track of registered plugins. Now that you've visited this page, you can reuse the Plugin registered here in any other document you create. Try this out by signing in, and going to a document in your own workspace. Access the document / plugin menu via the top-right dots. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.