Skip to content

Commit

Permalink
Fixing whitespaces
Browse files Browse the repository at this point in the history 
Signed-off-by: Azri Adam <[email protected]>
  • Loading branch information
@azri-cs
azri-cs committed Nov 1, 2024
1 parent 25243ee commit b58a73c
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 93 deletions.
142 changes: 71 additions & 71 deletions src/components/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,81 +5,81 @@

<template>
<div id="editor-container"
ref="el"
data-text-el="editor-container"
class="text-editor"
tabindex="-1"
@keydown.stop="onKeyDown">
ref="el"
data-text-el="editor-container"
class="text-editor"
tabindex="-1"
@keydown.stop="onKeyDown">
<DocumentStatus v-if="displayedStatus"
:idle="idle"
:lock="lock"
:is-resolving-conflict="isResolvingConflict"
:sync-error="syncError"
:has-connection-issue="hasConnectionIssue"
@reconnect="reconnect"/>

<SkeletonLoading v-if="showLoadingSkeleton"/>
:idle="idle"
:lock="lock"
:is-resolving-conflict="isResolvingConflict"
:sync-error="syncError"
:has-connection-issue="hasConnectionIssue"
@reconnect="reconnect" />

<SkeletonLoading v-if="showLoadingSkeleton" />
<Wrapper v-if="displayed"
:is-resolving-conflict="isResolvingConflict"
:has-connection-issue="hasConnectionIssue"
:content-loaded="contentLoaded"
:show-outline-outside="showOutlineOutside"
@outline-toggled="outlineToggled">
:is-resolving-conflict="isResolvingConflict"
:has-connection-issue="hasConnectionIssue"
:content-loaded="contentLoaded"
:show-outline-outside="showOutlineOutside"
@outline-toggled="outlineToggled">
<MainContainer v-if="hasEditor">
<!-- Readonly -->
<div v-if="readOnly" class="text-editor--readonly-bar">
<slot name="readonlyBar">
<ReadonlyBar>
<Status :document="document"
:dirty="dirty"
:sessions="filteredSessions"
:sync-error="syncError"
:has-connection-issue="hasConnectionIssue"/>
:dirty="dirty"
:sessions="filteredSessions"
:sync-error="syncError"
:has-connection-issue="hasConnectionIssue" />
</ReadonlyBar>
</slot>
</div>
<!-- Rich Menu -->
<template v-else>
<MenuBar v-if="renderMenus"
ref="menubar"
:is-hidden="hideMenu"
:loaded.sync="menubarLoaded">
ref="menubar"
:is-hidden="hideMenu"
:loaded.sync="menubarLoaded">
<Status :document="document"
:dirty="dirty"
:sessions="filteredSessions"
:sync-error="syncError"
:has-connection-issue="hasConnectionIssue"
@editor-width-change="handleEditorWidthChange"/>
<slot name="header"/>
:dirty="dirty"
:sessions="filteredSessions"
:sync-error="syncError"
:has-connection-issue="hasConnectionIssue"
@editor-width-change="handleEditorWidthChange" />
<slot name="header" />
</MenuBar>
<div v-else class="menubar-placeholder"/>
<div v-else class="menubar-placeholder" />
</template>
<ContentContainer v-show="contentLoaded"
ref="contentWrapper"/>
ref="contentWrapper" />
</MainContainer>
<Reader v-if="isResolvingConflict"
:content="syncError.data.outsideChange"
:is-rich-editor="isRichEditor"/>
:content="syncError.data.outsideChange"
:is-rich-editor="isRichEditor" />
</Wrapper>
<Assistant v-if="hasEditor"/>
<Assistant v-if="hasEditor" />
<Translate :show="translateModal"
:content="translateContent"
@insert-content="translateInsert"
@replace-content="translateReplace"
@close="hideTranslate"/>
:content="translateContent"
@insert-content="translateInsert"
@replace-content="translateReplace"
@close="hideTranslate" />
</div>
</template>

<script>
import Vue, {ref, set, watch} from 'vue'
import {getCurrentUser} from '@nextcloud/auth'
import {loadState} from '@nextcloud/initial-state'
import {isPublicShare} from '@nextcloud/sharing/public'
import {emit, subscribe, unsubscribe} from '@nextcloud/event-bus'
import {Collaboration} from '@tiptap/extension-collaboration'
import Vue, { ref, set, watch } from 'vue'
import { getCurrentUser } from '@nextcloud/auth'
import { loadState } from '@nextcloud/initial-state'
import { isPublicShare } from '@nextcloud/sharing/public'
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
import { Collaboration } from '@tiptap/extension-collaboration'
import Autofocus from '../extensions/Autofocus.js'
import {Doc} from 'yjs'
import {useElementSize} from '@vueuse/core'
import { Doc } from 'yjs'
import { useElementSize } from '@vueuse/core'

import {
EDITOR,
Expand All @@ -93,22 +93,22 @@ import {
} from './Editor.provider.js'
import ReadonlyBar from './Menu/ReadonlyBar.vue'

import {logger} from '../helpers/logger.js'
import {getDocumentState, applyDocumentState, getUpdateMessage} from '../helpers/yjs.js'
import {SyncService, ERROR_TYPE, IDLE_TIMEOUT} from './../services/SyncService.js'
import { logger } from '../helpers/logger.js'
import { getDocumentState, applyDocumentState, getUpdateMessage } from '../helpers/yjs.js'
import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService.js'
import createSyncServiceProvider from './../services/SyncServiceProvider.js'
import AttachmentResolver from './../services/AttachmentResolver.js'
import {extensionHighlight} from '../helpers/mappings.js'
import { extensionHighlight } from '../helpers/mappings.js'
import {
createRichEditor,
createPlainEditor,
serializePlainText,
loadSyntaxHighlight,
} from './../EditorFactory.js'
import {createMarkdownSerializer} from './../extensions/Markdown.js'
import { createMarkdownSerializer } from './../extensions/Markdown.js'
import markdownit from './../markdownit/index.js'

import {CollaborationCursor} from '../extensions/index.js'
import { CollaborationCursor } from '../extensions/index.js'
import DocumentStatus from './Editor/DocumentStatus.vue'
import isMobile from './../mixins/isMobile.js'
import setContent from './../mixins/setContent.js'
Expand Down Expand Up @@ -228,12 +228,12 @@ export default {

setup() {
const el = ref(null)
const {width} = useElementSize(el)
const { width } = useElementSize(el)
watch(width, value => {
const maxWidth = Math.floor(value) - 36
el.value.style.setProperty('--widget-full-width', `${maxWidth}px`)
})
return {el, width}
return { el, width }
},

data() {
Expand Down Expand Up @@ -492,7 +492,7 @@ export default {
}
},

onOpened({document, session}) {
onOpened({ document, session }) {
this.currentSession = session
this.document = document
this.readOnly = document.readOnly
Expand All @@ -509,7 +509,7 @@ export default {
})
},

onLoaded({document, documentSource, documentState}) {
onLoaded({ document, documentSource, documentState }) {
if (documentState) {
applyDocumentState(this.$ydoc, documentState, this.$providers[0])
// distribute additional state that may exist locally
Expand All @@ -519,7 +519,7 @@ export default {
this.$queue.push(updateMessage)
}
} else {
this.setInitialYjsState(documentSource, {isRichEditor: this.isRichEditor})
this.setInitialYjsState(documentSource, { isRichEditor: this.isRichEditor })
}

this.$baseVersionEtag = document.baseVersionEtag
Expand All @@ -532,8 +532,8 @@ export default {

const session = this.currentSession
const extensions = [
Autofocus.configure({fileId: this.fileId}),
Collaboration.configure({document: this.$ydoc}),
Autofocus.configure({ fileId: this.fileId }),
Collaboration.configure({ document: this.$ydoc }),
CollaborationCursor.configure({
provider: this.$providers[0],
user: {
Expand All @@ -559,15 +559,15 @@ export default {
|| this.fileExtension
loadSyntaxHighlight(language)
.then(() => {
this.$editor = createPlainEditor({language, extensions})
this.$editor = createPlainEditor({ language, extensions })
this.hasEditor = true
this.listenEditorEvents()
})
}

},

onChange({document, sessions}) {
onChange({ document, sessions }) {
this.updateSessions.bind(this)(sessions)
this.document = document

Expand All @@ -578,31 +578,31 @@ export default {
}
},

onCreate({editor}) {
onCreate({ editor }) {
this.$syncService.startSync()
const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
this.emit('create:content', {
markdown: proseMirrorMarkdown,
})
},

onUpdate({editor}) {
onUpdate({ editor }) {
// this.debugContent(editor)
const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
this.emit('update:content', {
markdown: proseMirrorMarkdown,
})
},

onSync({steps, document}) {
onSync({ steps, document }) {
this.hasConnectionIssue = this.$syncService.backend.fetcher === 0 || !this.$providers[0].wsconnected || this.$syncService.pushError > 0
this.$nextTick(() => {
this.emit('sync-service:sync')
})
this.document = document
},

onError({type, data}) {
onError({ type, data }) {
this.$nextTick(() => {
this.$editor?.setEditable(false)
this.emit('sync-service:error')
Expand Down Expand Up @@ -674,7 +674,7 @@ export default {
},

onSave() {
emit('files:file:updated', {fileid: this.fileId})
emit('files:file:updated', { fileid: this.fileId })
this.$nextTick(() => {
this.emit('sync-service:save')
})
Expand Down Expand Up @@ -720,7 +720,7 @@ export default {
this.$editor = null
this.hasEditor = false
} catch (error) {
logger.warn('Failed to destroy editor', {error})
logger.warn('Failed to destroy editor', { error })
}
}
return true
Expand Down Expand Up @@ -803,13 +803,13 @@ export default {
this.translateModal = false
},
translateInsert(content) {
this.$editor.commands.command(({tr, commands}) => {
this.$editor.commands.command(({ tr, commands }) => {
return commands.insertContentAt(tr.selection.to, content)
})
this.translateModal = false
},
translateReplace(content) {
this.$editor.commands.command(({tr, commands}) => {
this.$editor.commands.command(({ tr, commands }) => {
const selection = tr.selection
const range = {
from: selection.from,
Expand Down
28 changes: 14 additions & 14 deletions src/components/Editor/SessionList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,26 @@
<template #trigger="{ attrs }">
<div>
<button :title="label"
:aria-label="label"
class="avatar-list"
v-bind="attrs">
<div class="avatardiv icon-group"/>
:aria-label="label"
class="avatar-list"
v-bind="attrs">
<div class="avatardiv icon-group" />
<AvatarWrapper v-for="session in sessionsVisible"
:key="session.id"
:session="session"
:size="30"/>
:key="session.id"
:session="session"
:size="30" />
</button>
</div>
</template>
<template #default>
<div class="session-menu">
<slot name="lastSaved"/>
<slot name="lastSaved" />
<ul>
<slot/>
<slot />
<li v-for="session in participantsPopover"
:key="session.id"
:style="avatarStyle(session)">
<AvatarWrapper :session="session" :size="36"/>
<AvatarWrapper :session="session" :size="36" />
<span class="session-label">
{{
session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest'))
Expand All @@ -47,12 +47,12 @@
</template>

<script>
import {NcCheckboxRadioSwitch, NcPopover} from '@nextcloud/vue'
import { NcCheckboxRadioSwitch, NcPopover } from '@nextcloud/vue'
import AvatarWrapper from './AvatarWrapper.vue'
import {COLLABORATOR_DISCONNECT_TIME, COLLABORATOR_IDLE_TIME} from '../../services/SyncService.js'
import {loadState} from '@nextcloud/initial-state'
import { COLLABORATOR_DISCONNECT_TIME, COLLABORATOR_IDLE_TIME } from '../../services/SyncService.js'
import { loadState } from '@nextcloud/initial-state'
import axios from '@nextcloud/axios'
import {generateUrl} from '@nextcloud/router'
import { generateUrl } from '@nextcloud/router'

export default {
name: 'SessionList',
Expand Down
16 changes: 8 additions & 8 deletions src/components/Editor/Status.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,29 @@
<div class="text-editor__session-list">
<div :title="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
<NcButton type="tertiary"
:aria-label="t('text', 'Save document')"
@click="onClickSave">
:aria-label="t('text', 'Save document')"
@click="onClickSave">
<template #icon>
<NcSavingIndicatorIcon :saving="saveStatusClass === 'saving'"
:error="saveStatusClass === 'error'"/>
:error="saveStatusClass === 'error'" />
</template>
</NcButton>
</div>
<SessionList :sessions="sessions"
@editor-width-change="onEditorWidthChange">
@editor-width-change="onEditorWidthChange">
<p slot="lastSaved" class="last-saved">
{{ t('text', 'Last saved') }}: {{ lastSavedString }}
</p>
<GuestNameDialog v-if="$isPublic && currentSession && !currentSession.userId" :session="currentSession"/>
<GuestNameDialog v-if="$isPublic && currentSession && !currentSession.userId" :session="currentSession" />
</SessionList>
</div>
</template>

<script>

import {ERROR_TYPE} from '../../services/SyncService.js'
import { ERROR_TYPE } from '../../services/SyncService.js'
import moment from '@nextcloud/moment'
import {NcButton, NcSavingIndicatorIcon} from '@nextcloud/vue'
import { NcButton, NcSavingIndicatorIcon } from '@nextcloud/vue'
import {
useIsMobileMixin,
useIsPublicMixin,
Expand Down Expand Up @@ -92,7 +92,7 @@ export default {
return this.dirty || this.hasUnsavedChanges
},
lastSavedStatusTooltip() {
let message = t('text', 'Last saved {lastSave}', {lastSave: this.lastSavedString})
let message = t('text', 'Last saved {lastSave}', { lastSave: this.lastSavedString })
if (this.hasSyncCollission) {
message = t('text', 'The document has been changed outside of the editor. The changes cannot be applied.')
}
Expand Down

0 comments on commit b58a73c

Please sign in to comment.