anyproto/anytype-ts
1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-08 05:57:02 +09:00
Code Activity

JS-3320: embed option on pastee

Browse source
This commit is contained in:
Andrew Simachev 2023-11-08 13:31:33 +01:00
parent c0dd51bd44
commit 4f017aa671
No known key found for this signature in database
GPG key ID: 49A163D0D14E6FD8
4 changed files with 83 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
electron.js
View file

@ -27,7 +27,7 @@ const csp = [
`media-src 'self' http://*:* https://*:* data: blob: file://* https://*.googlevideo.com`,
`style-src 'unsafe-inline' http://localhost:* file://* https://*.youtube.com/ https://*.vimeocdn.com`,
`font-src data: file://* http://localhost:* https://*.youtube.com/ https://*.vimeocdn.com`,
`connect-src file://* http://localhost:* http://127.0.0.1:* ws://localhost:* https://*.anytype.io https://api.amplitude.com/ devtools://devtools data: https://*.youtube.com/ https://*.vimeocdn.com/ https://*.vimeo.com/ https://*.googlevideo.com`,
`connect-src file://* http://localhost:* http://127.0.0.1:* ws://localhost:* https://*.anytype.io https://api.amplitude.com/ devtools://devtools data: https://*.youtube.com/ https://*.vimeocdn.com/ https://*.vimeo.com/ https://*.googlevideo.com 'https://*.akamaized.net`,
`script-src-elem file: http://localhost:* https://sentry.io devtools://devtools 'unsafe-inline' https://*.youtube.com/ https://*.vimeocdn.com https://*.gstatic.com/`,
`frame-src chrome-extension://react-developer-tools http://localhost:*/embed/iframe.html https://*.youtube.com/ https://*.vimeo.com/`,
`worker-src 'self' 'unsafe-eval' blob: http://localhost:*`,

66
src/ts/component/editor/page.tsx
View file

@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
import { throttle } from 'lodash';
import { Block, Icon, Loader, Deleted, DropTarget } from 'Component';
import { commonStore, blockStore, detailStore, menuStore, popupStore } from 'Store';
import { I, C, Key, UtilCommon, UtilData, UtilObject, Preview, Mark, focus, keyboard, Storage, UtilRouter, Action, translate, analytics, Renderer, sidebar } from 'Lib';
import { I, C, Key, UtilCommon, UtilData, UtilObject, UtilEmbed, Preview, Mark, focus, keyboard, Storage, UtilRouter, Action, translate, analytics, Renderer, sidebar } from 'Lib';
import Controls from 'Component/page/head/controls';
import PageHeadEdit from 'Component/page/head/edit';
import Constant from 'json/constant.json';
@ -1727,9 +1727,28 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
isEmpty && !isInsideTable ? { id: 'object', name: translate('editorPageCreateBookmarkObject') } : null,
!isInsideTable ? { id: 'block', name: translate('editorPageCreateBookmark') } : null,
{ id: 'cancel', name: translate('editorPagePasteText') },
//{ id: 'embed', name: translate('editorPagePasteEmbed') },
].filter(it => it);
const embed = url.match(/(youtube.com|youtu.be|vimeo.com)/gi);
let processor = null;
if (embed) {
switch (embed[0]) {
case 'youtu.be':
case 'youtube.com': {
processor = I.EmbedProcessor.Youtube;
break;
};
case 'vimeo.com': {
processor = I.EmbedProcessor.Vimeo;
break;
}
};
options.push({ id: 'embed', name: translate('editorPagePasteEmbed') });
};
menuStore.open('select', {
element: `#block-${focused}`,
offsetX: Constant.size.blockMenu,
@ -1747,10 +1766,11 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
onSelect: (event: any, item: any) => {
let value = block.content.text;
let to = 0;
const marks = UtilCommon.objectCopy(block.content.marks || []);
switch (item.id) {
case 'link':
case 'link': {
if (currentFrom == currentTo) {
value = UtilCommon.stringInsert(value, url + ' ', currentFrom, currentFrom);
to = currentFrom + url.length;
@ -1769,8 +1789,9 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
focus.apply();
});
break;
};
case 'object':
case 'object': {
C.ObjectToBookmark(rootId, url, (message: any) => {
if (message.error.code) {
return;
@ -1786,16 +1807,18 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
});
});
break;
};
case 'block':
case 'block': {
C.BlockBookmarkCreateAndFetch(rootId, focused, length ? I.BlockPosition.Bottom : I.BlockPosition.Replace, url, (message: any) => {
if (!message.error.code) {
analytics.event('CreateBlock', { middleTime: message.middleTime, type: I.BlockType.Bookmark });
};
});
break;
};
case 'cancel':
case 'cancel': {
value = UtilCommon.stringInsert(block.content.text, url + ' ', currentFrom, currentFrom);
to = currentFrom + url.length;
@ -1804,6 +1827,37 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
focus.apply();
});
break;
};
case 'embed': {
if (processor === null) {
break;
};
switch (processor) {
case I.EmbedProcessor.Youtube: {
url = url.replace(/\/watch\/?\??/, '/embed/');
url = url.replace('v=', '');
break;
};
case I.EmbedProcessor.Vimeo: {
const a = new URL(url);
url = `https://player.vimeo.com/video${a.pathname}`;
break;
};
};
this.blockCreate(block.id, I.BlockPosition.Bottom, {
type: I.BlockType.Embed,
content: {
processor,
text: UtilEmbed.getHtml(processor, url),
}
});
break;
};
};
},
}

2
src/ts/lib/index.ts
View file

@ -15,6 +15,7 @@ import UtilObject from './util/object';
import UtilMenu from './util/menu';
import UtilRouter from './util/router';
import UtilDate from './util/date';
import UtilEmbed from './util/embed';
import { keyboard, Key } from './keyboard';
import { sidebar } from './sidebar';
@ -96,4 +97,5 @@ export {
UtilMenu,
UtilRouter,
UtilDate,
UtilEmbed,
};

20
src/ts/lib/util/embed.ts Normal file
View file

@ -0,0 +1,20 @@
import { I, UtilCommon } from 'Lib';
class UtilEmbed {
getHtml (processor: I.EmbedProcessor, content: any): string {
const fn = UtilCommon.toCamelCase(`get-${I.EmbedProcessor[processor]}-html`)
return this[fn] ? this[fn](content) : '';
};
getYoutubeHtml (content: string): string {
return `<iframe width="560" height="315" src="${content}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
};
getVimeoHtml (content: string): string {
return `<iframe src="${content}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
};
};
export default new UtilEmbed();