fantasticit fantasticit

Orthogonal Connectors

This algorithm returns the points that form an orthogonal path between two rectangles.

How to Use

// Define shapes
const shapeA = {left: 50,  top: 50, width: 100, height: 100};
const shapeB = {left: 200, top: 200, width: 50, height: 100};

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent


	/**
	* Modifies legacy html to match TipTap document structure,
	* without losing content.
	*
	* Images in paragraphs, links with images inside,
	* links not in paragraphs and YouTube videos
	* are taken care of.
	*
	* Images are assumed to be configured as blocks in TipTap.

	import {LanguageDescription, LanguageSupport} from "@codemirror/language"
	import {languages} from "@codemirror/language-data"
	import {highlightTree} from "@codemirror/highlight"
	import {highlightStyle} from "./highlight-style"

	export function syntaxHighlight(text: string, support: LanguageSupport, callback: (token: {text: string; style: string; from: number; to: number}) => void, options = {match: highlightStyle.match}) {
	let pos = 0;
	let tree = support.language.parseString(text);
	highlightTree(tree, options.match, (from, to, classes) => {
	from > pos && callback({text: text.slice(pos, from), style: null, from: pos, to: from});

	/* Partial implementation from https://zhuanlan.zhihu.com/p/33612593 */
	import _ from 'lodash';

	/* 标点 */
	const punctuationRegex = /\p{Punctuation}/u;
	/* 空格 */
	const spaceRegex = /\p{Separator}/u;
	/* CJK 字符，中日韩 */
	const cjkRegex = /\p{Script=Han}\|\p{Script=Katakana}\|\p{Script=Hiragana}\|\p{Script=Hangul}/u;

	.ProseMirror .MathBlock pre {
	background: var(--default-back);
	color: rgb(var(--default-font));
	font-size: 0.8em;
	display: flex;
	padding: 1em;
	}

	.ProseMirror .MathBlock {
	display: flex;

	.ProseMirror .Math {
	display: contents;
	}

	.ProseMirror .Math .katex-editor {
	display: inline;
	}

	.ProseMirror .Math .katex-render .katex {
	font-size: 1em;

	/* HTML to Microsoft Word Export
	* This code demonstrates how to export an html element to Microsoft Word
	* with CSS styles to set page orientation and paper size.
	* Tested with Word 2010, 2013 and FireFox, Chrome, Opera, IE10-11
	* Fails in legacy browsers (IE<10) that lack window.Blob object
	*/
	function saveDoc() {

	if (!window.Blob) {
	alert('Your legacy browser does not support this action.');

	#! /usr/bin/env node
	// I am ./bin/buildSitemap.js

	const path = require('path')
	const glob = require('glob')
	const fs = require('fs')

	const SITE_ROOT = process.env.SITE_ROOT \|\| 'https://www.actionherojs.com'
	const SOURCE = process.env.SOURCE \|\| path.join(__dirname, '..', 'pages', '/*/.js')
	const DESTINATION = process.env.DESTINATION \|\| path.join(__dirname, '..', 'static', 'sitemap.xml')

	import {Decoration, DecorationSet} from "prosemirror-view";

	import {Plugin} from 'prosemirror-state';

	const SelectPlugin = new Plugin({
	state: {
	init(config, instance) {
	return { deco: DecorationSet.empty };
	},
	apply(transaction, state, prevEditorState, editorState) {