JS-4051: add checkbox

extension/img/checkbox0.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="13" height="13" rx="3" stroke="#5697F5" stroke-width="1" y="0.5" x="0.5" />
+</svg>

extension/img/checkbox1.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="14" height="14" rx="3" fill="#5697F5" y="0" x="0" />
+	<path d="M 3.5 7.428 L 6 9.929 L 10.5 3.428" stroke="white" stroke-linecap="round" />
+</svg>

extension/popup/create.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 import arrayMove from 'array-move';
 import { getRange, setRange } from 'selection-ranges';
-import { Label, Input, Button, Select, Loader, Error, DragBox, Tag } from 'Component';
+import { Label, Input, Button, Select, Loader, Error, DragBox, Tag, Icon } from 'Component';
 import { I, C, UtilCommon, UtilData, Relation, keyboard, UtilObject, UtilRouter, Storage } from 'Lib';
 import { dbStore, detailStore, commonStore, menuStore, extensionStore } from 'Store';
 import Constant from 'json/constant.json';
@@ -12,6 +12,7 @@ import Util from '../lib/util';
 interface State {
 	error: string;
 	isLoading: boolean;
+	withContent: boolean;
 };
 
 const MAX_LENGTH = 320;
@@ -32,8 +33,9 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 	url = '';
 
 	state = {
-		isLoading: false,
 		error: '',
+		isLoading: false,
+		withContent: true,
 	};
 
 	constructor (props: I.PageComponent) {
@@ -48,11 +50,12 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 		this.onInput = this.onInput.bind(this);
 		this.onFocus = this.onFocus.bind(this);
 		this.onDragEnd = this.onDragEnd.bind(this);
+		this.onCheckbox = this.onCheckbox.bind(this);
 		this.focus = this.focus.bind(this);
 	};
 
 	render () {
-		const { isLoading, error } = this.state;
+		const { error, isLoading, withContent } = this.state;
 		const { space } = commonStore;
 		const tags = this.getTagsValue();
 
@@ -101,6 +104,11 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 							/>
 						</div>
 
+						<div className="row withContent" onClick={this.onCheckbox}>
+							<Icon className={[ 'checkbox', (withContent ? 'active' : '') ].join(' ')} />
+							<Label text="Add page content" />
+						</div>
+
 						<div className="row">
 							<Label text="Tag" />
 
@@ -410,6 +418,8 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 			return;
 		};
 
+		const { withContent } = this.state;
+
 		this.isCreating = true;
 		this.setState({ isLoading: true, error: '' });
 
@@ -418,7 +428,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 
 		delete(details.type);
 
-		C.ObjectCreateFromUrl(details, commonStore.space, type, this.url, (message: any) => {
+		C.ObjectCreateFromUrl(details, commonStore.space, type, this.url, withContent, (message: any) => {
 			this.setState({ isLoading: false });
 
 			if (message.error.code) {
@@ -433,6 +443,10 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 		});
 	};
 
+	onCheckbox () {
+		this.setState({ withContent: !this.state.withContent });
+	};
+
 	scrollToBottom () {
 		const node = $(this.node);
 		const content: any = node.find('.cellContent');

extension/scss/popup.scss

@@ -44,6 +44,14 @@ html.anytypeWebclipper-popup { width: 268px; }
 		.row { margin: 0px 0px 10px 0px; }
 		.row:last-child { margin: 0px; }
 
+		.row.withContent { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; cursor: pointer; }
+		.row.withContent {
+			.icon.checkbox { width: 14px; height: 14px; background-image: url('../img/checkbox0.svg'); }
+			.icon.checkbox.active {  background-image: url('../img/checkbox1.svg'); }
+
+			.label { color: var(--color-text-primary); margin: 0px; }
+		}
+
 		.label { @include text-small; color: var(--color-text-secondary); margin: 0px 0px 4px 0px; }
 
 		.box { border: 1px solid var(--color-shape-secondary); border-radius: 1px; min-height: 32px; }

src/ts/lib/api/command.ts

@@ -1241,13 +1241,14 @@ export const ObjectCreateBookmark = (details: any, spaceId: string, callBack?: (
 	dispatcher.request(ObjectCreateBookmark.name, request, callBack);
 };
 
-export const ObjectCreateFromUrl = (details: any, spaceId: string, typeKey: string, url: string, callBack?: (message: any) => void) => {
+export const ObjectCreateFromUrl = (details: any, spaceId: string, typeKey: string, url: string, withContent: boolean, callBack?: (message: any) => void) => {
 	const request = new Rpc.Object.CreateFromUrl.Request();
 
 	request.setDetails(Encode.struct(details));
 	request.setSpaceid(spaceId);
 	request.setObjecttypeuniquekey(typeKey);
 	request.setUrl(url);
+	request.setAddpagecontent(withContent);
 
 	dispatcher.request(ObjectCreateFromUrl.name, request, callBack);
 };