This repository was archived by the owner on Jun 2, 2022. It is now read-only.
Repository navigation
Expand file tree
/
Copy pathEditor.tsx
More file actions
121 lines (112 loc) · 4.07 KB
/
Copy pathEditor.tsx
File metadata and controls
121 lines (112 loc) · 4.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react'
import { View, KeyboardAvoidingView, SafeAreaView, Platform } from 'react-native'
import {
Typer,
Toolbar,
DocumentControlAction,
buildVectorIconControlSpec,
Document,
Images,
CONTROL_SEPARATOR,
useBridge,
useDocument
} from '@typeskill/typer'
import * as Permissions from 'expo-permissions'
import * as ImagePicker from 'expo-image-picker'
import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'
import { theme, ICON_SIZE, ICON_INACTIVE_COLOR, ICON_ACTIVE_COLOR, SPACING } from './retro-funk-theme' // './sober-theme'
import { Version } from './Version'
import { PermissionStatus } from 'expo-permissions'
interface State {
document: Document
}
type ImageAction = 'TAKE_PICTURE' | 'SELECT_FROM_GALLERY'
interface ImageSource {
uri: string
name: string
}
function buildMaterialCommunityControlSpec(actionType: DocumentControlAction, name: string, options?: any) {
return buildVectorIconControlSpec(MaterialCommunityIcons as any, actionType, name, options)
}
const toolbarLayout: Toolbar.Layout = [
buildMaterialCommunityControlSpec(DocumentControlAction.SELECT_TEXT_BOLD, 'format-bold'),
buildMaterialCommunityControlSpec(DocumentControlAction.SELECT_TEXT_ITALIC, 'format-italic'),
buildMaterialCommunityControlSpec(DocumentControlAction.SELECT_TEXT_UNDERLINE, 'format-underline'),
buildMaterialCommunityControlSpec(DocumentControlAction.SELECT_TEXT_STRIKETHROUGH, 'format-strikethrough-variant'),
CONTROL_SEPARATOR,
buildVectorIconControlSpec(MaterialIcons as any, DocumentControlAction.INSERT_IMAGE_AT_SELECTION, 'photo-library', {
actionOptions: 'SELECT_FROM_GALLERY',
}),
buildMaterialCommunityControlSpec(DocumentControlAction.INSERT_IMAGE_AT_SELECTION, 'camera-image', {
actionOptions: 'TAKE_PICTURE',
}),
]
async function askCameraPermission() {
const { status } = await Permissions.askAsync(Permissions.CAMERA)
if (status !== PermissionStatus.GRANTED) {
throw new Error(`Missing Camera permission. Status is: ${status}`)
}
}
async function askCameraRollPermission() {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL)
if (status !== PermissionStatus.GRANTED) {
throw new Error(`Missing Camera Roll permission. Status is: ${status}`)
}
}
async function pickOneImage (options?: ImageAction) {
let response: ImagePicker.ImagePickerResult
if (options === 'SELECT_FROM_GALLERY') {
if (Platform.OS === 'ios') {
await askCameraRollPermission()
}
response = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images })
} else {
await askCameraPermission()
await askCameraRollPermission()
response = await ImagePicker.launchCameraAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images })
}
if (response.cancelled) {
throw new Error('User cancelled.')
}
const description: Images.Description<ImageSource> = {
source: {
uri: response.uri,
name: response.uri,
},
width: response.width,
height: response.height,
}
return description
}
export function Editor() {
const [document, setDocument] = useDocument()
const bridge = useBridge<ImageSource>()
return (
<SafeAreaView style={theme.rootContainer}>
<KeyboardAvoidingView behavior={Platform.OS === 'android' ? undefined : 'padding'} style={theme.flex} enabled>
<Version />
<View style={theme.typerContainer}>
<Typer
document={document}
spacing={SPACING}
onDocumentUpdate={setDocument}
textStyle={theme.textStyle}
bridge={bridge}
maxMediaBlockHeight={300}
/>
</View>
<Toolbar<ImageSource, ImageAction>
iconSize={ICON_SIZE}
activeButtonColor={ICON_ACTIVE_COLOR}
inactiveButtonColor={ICON_INACTIVE_COLOR}
separatorColor="transparent"
document={document}
layout={toolbarLayout}
contentContainerStyle={theme.toolbarContainer}
bridge={bridge}
pickOneImage={pickOneImage}
/>
</KeyboardAvoidingView>
</SafeAreaView>
)
}