JS-3558: commands integration

dist/extension/js/background.js

@@ -83,11 +83,13 @@
 		return true;
 	});
 
-	initMenu = () => {
+	initMenu = async () => {
 		if (isInitMenu) {
 			return;
 		};
 
+		const tab = await getActiveTab();
+
 		isInitMenu = true;
 
 		chrome.contextMenus.create({
@@ -96,7 +98,29 @@
 			contexts: [ 'selection' ]
 		});
 
-		chrome.contextMenus.onClicked.addListener(() => sendToActiveTab({ type: 'clickMenu' }));
+		chrome.contextMenus.onClicked.addListener(() => {
+			chrome.scripting.executeScript({
+				target: { tabId: tab.id },
+				function: () => {
+					const sel = window.getSelection();
+
+					let html = '';
+					if (sel.rangeCount) {
+						const container = document.createElement("div");
+						for (var i = 0, len = sel.rangeCount; i < len; ++i) {
+							container.appendChild(sel.getRangeAt(i).cloneContents());
+						};
+						html = container.innerHTML;
+					};
+
+					return html;
+				}
+			}, res => {
+				if (res.length) {
+					sendToTab(tab, { type: 'clickMenu', html: res[0].result });
+				};
+			});
+		});
 	};
 
 	getActiveTab = async () => {

dist/extension/manifest.json

@@ -15,7 +15,8 @@
 	"permissions": [
 		"contextMenus",
 		"nativeMessaging",
-		"tabs"
+		"tabs",
+		"scripting"
 	],
 	"host_permissions": [
 		"*://*/*"

extension/iframe.tsx

@@ -38,6 +38,7 @@ const rootStore = {
 	dbStore,
 	menuStore,
 	popupStore,
+	extensionStore,
 };
 
 declare global {
@@ -113,6 +114,12 @@ class Iframe extends React.Component {
 					Util.init(serverPort, gatewayPort);
 					Util.authorize(appKey, () => UtilRouter.go('/create', {}));
 					break;
+
+				case 'clickMenu': {
+					extensionStore.setHtml(msg.html);
+					break;
+				};
+
 			};
 
 			/*

extension/iframe/create.tsx

@@ -2,20 +2,23 @@ import * as React from 'react';
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Button, Block, Loader } from 'Component';
-import { I } from 'Lib';
-import { blockStore } from 'Store';
+import { I, C, M } from 'Lib';
+import { blockStore, extensionStore } from 'Store';
 
 interface State {
 	isLoading: boolean;
 	error: string;
 };
 
+const ROOT_ID = 'preview';
+
 const Create = observer(class Create extends React.Component<I.PageComponent, State> {
 
 	state = {
 		isLoading: false,
 		error: '',
 	};
+	html = '';
 
 	constructor (props: I.PageComponent) {
 		super(props);
@@ -25,9 +28,12 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 
 	render () {
 		const { isLoading, error } = this.state;
-		const rootId = '';
-		const childrenIds = blockStore.getChildrenIds(rootId, rootId);
-		const children = blockStore.getChildren(rootId, rootId);
+		const { html } = extensionStore;
+		const childrenIds = blockStore.getChildrenIds(ROOT_ID, ROOT_ID);
+		const children = blockStore.getChildren(ROOT_ID, ROOT_ID);
+		const length = children.length;
+
+		console.log(html, childrenIds, children, length);
 
 		return (
 			<div className="page pageIndex">
@@ -47,7 +53,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 						<Block 
 							key={block.id} 
 							{...this.props}
-							rootId={rootId}
+							rootId={ROOT_ID}
 							index={i}
 							block={block}
 							getWrapperWidth={() => this.getWrapperWidth()}
@@ -59,11 +65,43 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 		);
 	};
 
-	componentDidMount(): void {
-		this.load();
+	componentDidUpdate (): void {
+		this.init();
 	};
 
-	load () {
+	init () {
+		const { html } = extensionStore;
+
+		if (html == this.html) {
+			return;
+		};
+
+		this.html = html;
+
+		C.BlockPreview(html, (message: any) => {
+			if (message.error.code) {
+				return;
+			};
+
+			const structure: any[] = [];
+			const blocks = message.blocks.map(it => new M.Block(it));
+
+			blocks.unshift(new M.Block({
+				id: ROOT_ID,
+				type: I.BlockType.Page,
+				childrenIds: message.blocks.map(it => it.id),
+				content: {},
+			}));
+
+			blocks.forEach((block: any) => {
+				structure.push({ id: block.id, childrenIds: block.childrenIds });
+			});
+
+			blockStore.set(ROOT_ID, blocks);
+			blockStore.setStructure(ROOT_ID, structure);
+
+			this.forceUpdate();
+		});
 	};
 
 	getWrapperWidth () {

src/ts/lib/api/command.ts

@@ -378,6 +378,14 @@ const BlockWidgetSetViewId = (contextId: string, blockId: string, viewId: string
 	dispatcher.request(BlockWidgetSetViewId.name, request, callBack);
 };
 
+const BlockPreview = (html: string, callBack?: (message: any) => void) => {
+	const request = new Rpc.Block.Preview.Request();
+
+	request.setHtml(html);
+
+	dispatcher.request(BlockPreview.name, request, callBack);
+};
+
 // ---------------------- BLOCK TEXT ---------------------- //
 
 const BlockTextSetText = (contextId: string, blockId: string, text: string, marks: I.Mark[], range: I.TextRange, callBack?: (message: any) => void) => {
@@ -1913,6 +1921,7 @@ export {
 	BlockPaste,
 	BlockCreate,
 	BlockSetFields,
+	BlockPreview,
 
 	BlockListMoveToExistingObject,
 	BlockListConvertToObjects,

src/ts/lib/api/response.ts

@@ -309,6 +309,11 @@ export const BlockListConvertToObjects = (response: Rpc.Block.ListConvertToObjec
 	};
 };
 
+export const BlockPreview = (response: Rpc.Block.Preview.Response) => {
+	return {
+		blocks: (response.getBlocksList() || []).map(Mapper.From.Block),
+	};
+};
 
 export const BlockDataviewCreateFromExistingObject = (response: Rpc.BlockDataview.CreateFromExistingObject.Response) => {
 	return {

src/ts/store/extension.ts

@@ -1,9 +1,27 @@
+import { makeObservable, observable, action, computed } from 'mobx';
+
 class ExtensionStore {
 
 	public createdObject = null;
 	public challengeId = '';
 	public serverPort = '';
 	public gatewayPort = '';
+	public htmlValue = '';
+
+	constructor() {
+        makeObservable(this, {
+			htmlValue: observable,
+			setHtml: action,
+		});
+	};
+
+	get html (): string {
+		return String(this.htmlValue || '');
+	};
+
+	setHtml (v: string) {
+		this.htmlValue = String(v || '');
+	};
 
 };